Forcing Scrollbars, 2010 Edition

One of the challenges in webdesign is preventing the slight jog that happens when you — in a centered HTML design — when you go from a page that needs a scrollbar, to one that doesn’t. Think about it — you go from the short contact page to the blog, and everything is offset to the left in the process, because the scrollbar takes up 18px. The solution, so far, has been to force the scrollbars by faking extra page height:

html { height: 100%; margin-bottom: 1px; }

Which has, for the most part, worked, even if it felt somewhat unnatural to scroll a page that doesn’t need scrolling. Fortunately, there’s a new method in town, which relies on CSS3:

html { overflow-y: scroll; }

This forces the scroll-pane even when not needed. The beauty of it is, it doesn’t add the actual scroll-bar until it’s actually needed. This works in Internet Explorer, Safari 3+, Firefox 3+, Opera and Chrome.

Special thanks Alexander Graf and also M. Slater who has a demo available.

3 thoughts on “Forcing Scrollbars, 2010 Edition”

  1. Hey J, in a fixed width environment my bottom scrollbar is not showing in FF 3.6 using this tweak. Are you experiencing the same?

    1. Joen says:

      No, the bottom / horisontal scrollbar shows up for me when needed.

      Make sure you don’t have “overflow-x: hidden” somewhere in your code.

Comments are closed.