I have various pages set up with tabs centred in the browser window. In Firefox and IE8 the vertical scrollbars only show if the page content requires it, which results in a visual jolt when some tabs are selected as the scrollbar appears and the page content is shifted to the left.
I can force vertical and horizontal scrollbars using
html { overflow: scroll }
but is it possible to just force the vertical scrollbar (with either css or javascript)?
6 answers
points
You can use overflow-y :scroll to force only the vertical scrolling. But take care, browser support is flaky
- This is exactly what I was looking for. Although various combinations of overflow-x and overflow-y may be flaky, using html { overflow-y: scroll } works in IE8 (both modes), FF3.5, Opera 10 and Chrome. It shows a blank scrollbar without the slider. Many thanks.
points
html { min-height: 101%; } This, along with most of of the answers here can be found at: http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better
Which was the number one result from google for: force scrollbar html
- The last one on the page is so simple, it makes me mad that I didn't think of it myself! And the article is from 2004.
point
Hmm. It's a bit tricky. The solution will propably be a little hacky. The jumping page is a natural browser behaviour though. So I don't see why it should be removed?
I guess you could generate an element with JavaScript after the page content so that you force a scrollbar. But it will still jump because there JS needs time initiating. If you generate content with CSS you don't know what height you need.
- I agree that his is normal behavior, or the browser behaving in the manner in which it was designed to. A page that is not long enough to scroll but shows a scroll bar seems weirder to than the jumping behavior your descibed.
point
Add this to your CSS: html { min-height: 100%; margin-bottom: 1px; }
- Works in compatibility mode in IE8 but not in FF 3.5
- ...which is a shame as it shows the blank scrollbar (in iE8 compat) which is what I'm after.
points
I'm just grasping at straws here, but you could make a transparent element that wraps around the content and give it a height longer than the viewport.
Rob's method works, too; since <html> is there already it probably works better.
points
Another option is
<body>
<div style="overflow: auto; height: 101%;">
<!-- content -->
</div>
</body>
I don't have IE8, but this works in FF3.5, Chrome 3, Opera 10 and IE7.
I originally started answering this question because I came across a hack solution yesterday while trying to REMOVE a scrollbar:
<[tag] style="overflow: auto; height: 100%;">
Oddly, if tag is html, Firefox 3.5 won't display a scrollbar but IE7 will. If tag is body (or the style is applied to both html and body), the reverse is true.
- The 'div style' method only worked if I removed the doctype declaration. Using the same styles in the head for html { } forced a scrollbar in FF3.5 and IE8 (both modes) though.
