HTML/CSS: Making the main scrollbar always visible

Question

Hi

I saw a trick once on a website which made the main scrollbar of the page always stay visible. I can't remember how it was done. Does anyone know?

Answer 1

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.

Answer 2

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

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

Answer 3

Try make the body height:101%. Thats the best solution in my opinion.

body {height:101%; }

Answer 4

I've found a way to make this work in the browsers of ye 'ol... err IE.

Yah it's ugly... I posted it here also http://stackoverflow.com/questions/1203503/browser-scrollbar-shift/1209046#1209046

#force_scroll { 
width:1em; 
position:absolute; 
top:0; 
bottom:-0.1px; 
z-index:-1; 
}

And then in your HTML somewhere (preferably right before your ):

<div id="force_scroll"></div>

Answer 5

html {height: 101%;}

I use this cross browsers solution (I 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.

By using this solution your CSS code would validate for W3C because you are not using non standard CSS attributes.