css constant display of vertical scrollbar without doubling

Question

I've been reading other questions and results found on google on the subject of how to keep the overflow-y scrollbar constantly visible, to prevent any awkward transitions from page to page, if one page is long, and one page is short.

The following solution was suggested in most answers:

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

This does make the scrollbar visible on short pages that wouldn't normally have them, but on long pages that would, it's creating two scrollbars. One that is scrollable, and a grayed one that isn't.

I suppose this solution may have worked in the past, and it could be new browser versions treating it differently.

Is there any current way to have one single vertical scrollbar present on all pages regardless of whether it's scrollable?

body {
background: none repeat scroll 0 0 #FFF;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 1.5;
margin: 0;
padding: 0;
position: relative;
overflow: auto;
height: 100%;
}

Answer 1

just change

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

to this

body {
    overflow-y: scroll;
}