Menu
Is there a way to always show a scrollbar on an iframe in HTML5, even if the content is not overflowing? The scrolling="yes" attribute doesn't work in HTML5. Is there a way using CSS?
929
Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used.
To always show the scrollbar, you need to enable a setting in Windows Settings. For that, press Win+I to open Windows Settings and go to Accessibility > Visual effects. Then, Toggle the Always show scrollbars button to turn it on.
Content that is presented in an iFrame appears with a vertical scrollbar if the length of the child document exceeds the height of the iFrame and with a horizontal scrollbar if the child document elements won't wrap to the width of the iFrame.
To scroll an iframe with JavaScript, we can use the scrollTo method. const myIframe = document. getElementById("iframe"); myIframe. onload = () => { myIframe.
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>Just as an add on, if you only want to have scrollbars showing in one direction and not both you can use the specific y and x css.
I wanted a vertical scrollbar showing all the time for the look of it but not the horizontal as width never changed.
So I used:
{overflow-y: scroll;}
The other one (in this case overflow-x) will default to auto and only show if needed.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
