Use CSS to make a browser’s vertical scrollbar always appear

Use a simple piece of CSS to force a scroll bar to appear on all pages within a website.

When using modern CSS-based design with fluid element widths, a website can sometimes appear to flicker if either:

1. A browser window is altered in size by an end user.
2. Hidden content on a page becomes visible, thus lengthening the page.
3. The end user clicks from a page with little content on a website to one with more content.

All of these problems arise because the browser is suddenly forced to display the vertical scroll bar where the previous state didn’t require it. The scroll bar ‘pushes’ variable-with content (and sometimes fixed-width content, depending on the design) a small fraction to the left, creating a “flickr”.

There is a very simple CSS-based fix that can be applied to XHTML and HTML pages that will cause all browsers to display the vertical scroll bar whether it is required or not. That way, when the scroll bar is required, it won’t ‘bump’ the content to the left.

The following code will force the scroll bar to permanently display in all modern browsers (including Internet Explorer 9.0.8, Firefox 9 and Chrome):

html {overflow-y: scroll;}

Where the scroll bar is not required, it will be blank.

Have Your Say

Δ