Skip to content

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

G2nd January 2012

CNo Comments

Tbrowser, HTML5, XHTML

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.

   

Comments:

No comments have yet been submitted. Be the first!

Have your say:

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.