Making the main scrollbar always visible

Solution 1:

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

This makes the scrollbar always visible and only active when needed.

Update: If the above does not work then just using this may.

html {
    overflow-y:scroll;
}

Solution 2:

Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used. So if any the solutions above don't appear to be working that might be why.

This is what you'll need to fix it:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

You can style it accordingly if you don't like the default.

Solution 3:

Things have changed in the last years. The answers above are not valid in all cases any more. Apple is pushing disappearing scrollbars everywhere. Safari, Chrome and even Firefox on MacOs (and iOs) only show scrollbars when actually scrolling — I don't know about current Windows/IE. However there are non-standard ways to style scroll bars on Webkit (IE dropped that a long time ago).

Solution 4:

html {
    overflow-y: scroll;
}

Is that what you want?

Unfortunately, Opera 9.64 seems to ignore that CSS declaration when applied to HTML or BODY, although it works for other block-level elements like DIV.

Solution 5:

html {height: 101%;}

I use this cross browsers solution (note: I always use DOCTYPE declaration in 1st line, I don't know if it works in quirksmode, never tested it).

This will always show an ACTIVE vertical scroll bar in every page, vertical scrollbar will be scrollable only of few pixels.

When page contents is shorter than browser's visible area (view port) you will still see the vertical scrollbar active, and it will be scrollable only of few pixels.

In case you are obsessed with CSS validation (I'm obesessed only with HTML validation) by using this solution your CSS code would also validate for W3C because you are not using non standard CSS attributes like -moz-scrollbars-vertical