Breaking News: Grepper is joining You.com. Read the official announcement!

iframe hide scrollbar but allow scrolling

JaFlammable answered on May 29, 2024 Popularity 6/10 Helpfulness 8/10

answer iframe hide scrollbar but allow scrolling

iframe hide scrollbar but allow scrolling

Comment

The solution would be to hide the iframe's scroll bar since "display: none;" in css and "scrolling="no" would prevent scrolling completely.

Note the 7 pixel difference between the parent div and the iframe, this effectively cuts off a portion of the iframe so that the scrollbar is hidden but you are still able to scroll.

REFERENCE: msbarnard's answer to filip5991's question on stackoverflow [07/10/2019]

<div style="width: 400px; overflow: hidden">
  <iframe src="https://fr.wikipedia.org/wiki/Main_Page" width="407"height="480">
</div>

<!--This method is original to me, and uses the full width of whatever the 
iframe is in. "msbarnard's" was suited for filip5991's specific request.-->
<div class="cover">
  <iframe src="https://fr.wikipedia.org/wiki/Main_Page">
</div>

.cover{
	width: 100%;
	overflow: hidden;
}

iframe {
	width: 102%;/*the extra 2% hides the bar behind the div*/
    height: 400px/*change per your digression*/;
}

Popularity 6/10 Helpfulness 8/10 Language html

Source: stackoverflow.com

Tags: hide html iframe scrollbar

Link to this answer
Share Copy Link

Contributed on May 29 2024

JaFlammable

0 Answers Avg Quality 2/10

iframe hide scrollbar but allow scrolling

Contents

More Related Answers

iframe hide scrollbar but allow scrolling

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.