Visible Vertical Scrollbar (in Firefox)

First published on 2007-07-09, updated on 2008-02-02.

In Firefox, the vertical scrollbar disappears when content fits inside the viewport. This makes several layout types shift position, typically by 10 to 20 pixels.

A workaround became possible in 2004 but it stands repeating and spreading around, imho.

Am I bothered?

It’s a usability problem: users must learn two positions for important things:

Consider this:

I’m guessing the answer is “no” on both counts.

Instructions for Firefox Users

You can make the vertical scrollbar visible all the time. Read the instructions before starting.

Always Visible Scrollbar

As used in Internet Explorer.

  1. Right-click this userContent.css file.
  2. Select Save Link As...

  3. You should usually should save it in C:\Documents and Settings\[Windows Login Name]\Application Data\Mozilla\Firefox\Profiles\[profile name]\chrome\, on these conditions:

    • You are using an English version of Windows 2000 or Windows XP.
    • The drive labelled C: is the one which has Windows installed on it.
    • [Windows Login Name] is the name you select at the “welcome” screen when starting Windows. (If you don’t have a “welcome” screen, this should be All Users.)
    • [profile name] is a random string of 8 letters, a dot (.) and then some more letters.

    For example, I would save it to C:\Documents and Settings\Ben\Application Data\Mozilla\Firefox\Profiles\lo3h7uay.default\chrome\.

    Failing that, try following the Where is my Mozilla profile located? tutorial.

  4. Click the Save button.
  5. Exit Firefox and then start it again.

You will now have a robust vertical scrollbar always visible.

Visible when needed Scrollbar

As in Firefox 2. These instructions prevent websites altering this.

  1. Follow all the “Always Visible Scrollbar” instructions above.
  2. Open the userContent.css file in a text editor, such as Notepad.

  3. Find this: 

    /* Visible vertical scrollbar which disables correctly and allows normal horizontal scrollbar behaviour. */
html {
 overflow-y: scroll !important;
}

  4. Replace with this: 

    /* Hidden vertical scrollbar which appears when needed and allows normal horizontal scrollbar behaviour. */
html {
 overflow-y: auto !important;
}
  5. Save the file by selecting File > Save in the text editor’s menu.

You will now have a robust vertical scrollbar visible when needed.

Uninstall

  1. Locate the userContent.css file:
  2. Rename it to userContent-scroll.css or something.

Or, if you want to keep other things in that file:

  1. Open the userContent.css file in a text editor, such as Notepad.

  2. Find this: 

    /* Visible vertical scrollbar which disables correctly and allows normal horizontal scrollbar behaviour. */
html {
 overflow-y: scroll !important;
}

  3. Replace with this: 

    /* Visible vertical scrollbar which disables correctly and allows normal horizontal scrollbar behaviour. */
html {
/* overflow-y: scroll !important; */
}
  4. Save the file by selecting File > Save in the text editor’s menu.

You’ll need to exit Firefox and start it again for any changes to take effect.

Technical Details

The file userContent.css is a user stylesheet. The supplied file contains this: 

/* Visible vertical scrollbar which disables correctly and allows normal horizontal scrollbar behaviour. */
html {
 overflow-y: scroll !important;
}

Pros

Cons

Instructions for Authors

You can add it your your web pages in this form: 

/* Visible vertical scrollbar which disables correctly, allows normal horizontal scrollbar behaviour and can be overruled by userContent.css. */
html {
 overflow-y: scroll;
}

Pros

Cons

Background

Dates back to Bugzilla in March 2001.

Since then, various solutions and arguments gravitated to Jon Hicks’s site. The solution here is Lachlan ‘Lachy’ Hunt’s from there.