Question

My pages are all using the typical fixed-width-margin-left-right-auto layout.

.container{
     width:900px;
     margin:0 auto;
}

Here comes the little problem. Some of those pages are higher than a window, which means they should show the vertical scroll bar on right side. Switching between those pages and others, the main container will move a little bit ( half-width of v-scrollbar ). I know it’s because width of parent element (body) changed.

But does any know if there be a library or existing hack to suppress this behaviour? (except body{overflow-y:scroll;})

reply to @Mateusz:
Thanks Matousz, a good idea. I tried the following code

console.log($('body')[0].offsetHeight+' '+$('body')[0].scrollHeight+' '+$('html'[0].offsetHeight+' '+$('html')[0].scrollHeight);

the test results are

           doc smaller than win              doc larger than win
firefox    1012 1012 1008 1362               1012 1012 1008 1007
chrome/ie  549 1525 545 545                    549 545 545 545

so they got different behaviours, and the comparing threadshods are different (1 and 4).

Answer 1

You can compare element.offsetHeight and element.scrollHeight. And change your position of your container depending on this.