Remove scrollbar from iframe
in your css:
iframe{
overflow:hidden;
}
HTML5 : Iframe No scrolling?
In HTML5 there is no scrolling attribute because "its function is better handled by CSS" see http://www.w3.org/TR/html5-diff/ for other changes. Well and the CSS solution:
CSS solution:
HTML4's scrolling="no"
is kind of an alias of the CSS's overflow: hidden
, to do so it is important to set size attributes width/height:
iframe.noScrolling{
width: 250px; /*or any other size*/
height: 300px; /*or any other size*/
overflow: hidden;
}
Add this class to your iframe and you're done:
<iframe src="http://www.example.com/" class="noScrolling"></iframe>
! IMPORTANT NOTE ! : overflow: hidden
for <iframe>
is not fully supported by all modern browsers yet(even chrome doesn't support it yet) so for now (2013) it's still better to use Transitional version and use scrolling="no"
and overflow:hidden
at the same time :)
UPDATE 2020: the above is still true, oveflow for iframes is still not supported by all majors
Hide scrollbar in iframe, while still scrolling
scrolling="no"
and
display:none
Will stop the iFrame from scrolling. The only other solution is to "hide" the scrollbar via overlapping.
<div style="width: 400px; overflow: hidden">
<iframe src="https://fr.wikipedia.org/wiki/Main_Page" width="407"height="480">
</div>
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.
HTML iframe - disable scroll
Unfortunately I do not believe it's possible in fully-conforming HTML5 with just HTML and CSS properties. Fortunately however, most browsers do still support the scrolling
property (which was removed from the HTML5 specification).
overflow
isn't a solution for HTML5 as the only modern browser which wrongly supports this is Firefox.
A current solution would be to combine the two:
<iframe src="" scrolling="no"></iframe>
iframe {
overflow: hidden;
}
But this could be rendered obsolete as browsers update. You may want to check this for a JavaScript solution: http://www.christersvensson.com/html-tool/iframe.htm
Edit: I've checked and scrolling="no"
will work in IE10, Chrome 25 and Opera 12.12.
How to make iFrame not have the scrolling bar
Like this:
<iframe ... scrolling="no"></iframe>
Edit: Also frameborder="0"
is handy to hide the border.
How to ALWAYS show scrollbar in iframe in HTML5
It seems that scrolling="yes"
was supported by some early browsers only. Judging from simulation of older versions in IE 11, it seems that IE 8 dropped the support: although the attribute as such is recognized, the value yes
is not—scroll bars are shown only when the content does not fit in.
This is a change in browser practices. It has nothing to do with HTML5. In fact, HTML5 describes the attribute scrolling="yes"
as mapping to the CSS setting overflow: scroll
, which is somewhat misleading.
Modern browsers implement iframe
so that the scroll bars are present, if needed for accessing all of the content, but not otherwise. Using scrolling=no
or overflow: hidden
, you can prevent the scroll bars from appearing, but not make them appear if the content fits (there is no overflow).
To make scroll bars appear, you need to make the embedded document set them up, e.g. by using body { overflow: scroll }
in it. Then it does not matter what the iframe
element says. The scroll bars will be passive (and light grey), when the content actually fits, but they will be there are occupy space, and they turn to active scroll bars as the content expands so that it does not fit. In the following example, I am embedding a page that sets body { overflow: scroll }
and has an editable body
element, so that you can add lines and see how the bars change:
<iframe src="http://www.cs.tut.fi/~jkorpela/hello.html"></iframe>
Related Topics
How to Specify Model to a Nginclude Directive in Angularjs
Set Div to Have Its Siblings Width
CSS - Border Where Only Half of a Border Is Visible
How to Customize a Select Element Through CSS to Achieve This Dark Style
Stop Google Chrome Auto Fill The Input
Change Color of One Character in a Text Box HTML/CSS
How to Handle Xml/HTML in Git Feature Branch Workflow
HTML5 Canvas Slows Down with Each Stroke and Clear
Set CSS Border to End in a 90 Instead of a 45 Degree Angle
How to Hide My Source Code So to Not Be Copied
Filter Extensions in HTML Form Upload
Wkhtmltopdf Not Loading Local CSS and Images
Thymeleaf - How to Add Checked Attribute to Input Conditionally
HTML List Element: Sharing The Parent Width into Equal Parts