Turning On Scrollbar, Even When Not Needed

[liquidgraph]

I have this pesky problem with Netscape. If a webpage contains less information than can fit on the screen, no scrollbar is drawn in the browser. But this screws with my website because some pages are long, others are short, and when you navigate through them, consistent elements like navigation bars, etc, start to skip around, because on some pages the scrollbar is rendered, but on others it is not. When the scrollbar is rendered, it shifts the page ever so slightly.

Is there code that will always show a scrollbar, grayed out if the page is too short for a functional one? I know IE does this by default, but I need Netscape support too.

[_Aerospace_Eng_]

Add this to your CSS.
html {
height:100.1%;
}
It won't be grayed out though. Nothing you can do about that.

[VIPStephan]

But this screws with my website because some pages are long, others are short, and when you navigate through them, consistent elements like navigation bars, etc, start to skip around, […]

While Aero’s advice is correct this sounds very much like you didn’t code your site correctly. With clean HTML and proper styling (CSS) the page will also shift to the left a little bit when the scrollbar appears but the page layout itself stays the same. If, on your site, different sections do different things this sounds to me like you used too much absolute positioning where it isn’t needed.

Anyway, I don’t wanna complain too much where it wouldn’t dedicate anything to the solution of the problem so the most simple way is to follow Aero’s advice and make the page slightly longer by default to show the scrollbar.

[koyama]

Alternatively, this works in Firefox. I don't know about Netscape though.

html {
overflow-y: scroll;
}

[W3Daryl]

Thanks for the great tip. I can't count the times I've been briefly thrown off due to the missing scrollbar when testing a site. One thing to note that overflow-y:scroll does not validate. However overflow: scroll; does. The only difference you will get both a horizontal and vertical scroll bar. Cheers.

[Arbitrator]

One thing to note that overflow-y:scroll does not validate. However overflow: scroll; does.It should validate if you use the CSS3 profile; validate an example document (http://jigsaw.w3.org/css-validator/validator?text=selector+%7B+overflow-y%3A+scroll%3B+%7D&usermedium=all&warning=1&profile=css3&usermedium=all). However, there might be issues with browser support. Firefox 2, Internet Explorer 7, Netscape 9, and Safari 3 support overflow-y. Opera 9 does not. I don’t know about other browsers.

[koyama]

However, there might be issues with browser support. Firefox 2, Internet Explorer 7, Netscape 9, and Safari 3 support overflow-y. Opera 9 does not. I don’t know about other browsers.
Thanks for clarifying the browser support issue. I may add that Internet Explorer 5 and 6 also support the overflow-x and overflow-y property.

It should be noted that in IE the browsers default scrollbar is implemented on the html element in IE6 and up, but on the body element in IE5 (and IE quirks mode).

Not many seem to know that in IE6 and IE7 one can remove the scrollbar when not needed by using html {overflow: auto} which gives a similar interface as the one in Firefox. However, this is not recommended in IE6 due to the IE6 Unnecessary Horizontal Scrollbar Bug (http://www.noscope.com/journal/2004/02/ie-horizontal-scrollbar-bug) (The article does not cover the topic so well, but it is the best source I know of.)

[Graft-Creative]

I recall reading somewhere that setting the html height to 100.01%, rather than 100.1% will make the scroll bars kick in, but without causing actual scroll (in FF at least)

Don't quote me on that though, I've tried neither method, as it's not an issue that particularly bothers me (though I can see why it drives people nuts :) )

Gary

[scrupul0us]

http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better

[liquidgraph]

Great discussion guys. I tried two suggestions: the "overflow-y: scroll" approach doesn't seem to work with my Netscape. The "100.1%" approach works with Netscape, producing a scrollbar that's not grayed out, but virtually unscrollable. Ideally I'd have liked it to be grayed out, but this is acceptable too. Much better than shifting content!

BTW, the "100.1%" approach still yields a grayed out scrollbar in IE, which I thought was interesting.

[Arbitrator]

Great discussion guys. I tried two suggestions: the "overflow-y: scroll" approach doesn't seem to work with my Netscape.overflow-y does not work in Netscape 8’s Firefox rendering mode; I guess Firefox 1.0 didn’t support that. It does work in Netscape 8’s Internet Explorer (6) rendering mode and in Netscape 9 Beta. Netscape 9 Beta uses the same rendering engine as Firefox 2.