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 almost 10 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 almost 10 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 almost 10 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 almost 10 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 almost 10 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 almost 10 years ago
Rob 230

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

Answered almost 10 years ago by Rob
  • Works in compatibility mode in IE8 but not in FF 3.5 pelms almost 10 years ago
  • ...which is a shame as it shows the blank scrollbar (in iE8 compat) which is what I'm after. pelms almost 10 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 almost 10 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 almost 10 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 almost 10 years ago