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

This was chosen as the best answer

You can use overflow-y :scroll to force only the vertical scrolling. But take care, browser support is flaky

Answered over 8 years ago by Divya Manian
  • 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. pelms over 8 years ago

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

Answered over 8 years ago by George A Sisco III
  • 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. tahdhaze09 over 8 years ago

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.

Answered over 8 years ago by Jens Hedqvist
  • 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. Dwayne Anderson over 8 years ago
Rob 230

Add this to your CSS: html { min-height: 100%; margin-bottom: 1px; }

Answered over 8 years ago by Rob
  • Works in compatibility mode in IE8 but not in FF 3.5 pelms over 8 years ago
  • ...which is a shame as it shows the blank scrollbar (in iE8 compat) which is what I'm after. pelms over 8 years ago

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.

Answered over 8 years ago by tahdhaze09

Another option is

<div style="overflow: auto; height: 101%;">
    <!-- content -->

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.

Answered over 8 years ago by Lord Torgamus
  • 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. pelms over 8 years ago