CODEWITHSUNDEEP
javascripthtmlcsspositionscrollbar
Michael Yin
Michael Yin

Reputation: 1764

Hack to maintain horizontal element position when scroll bar apears

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).

Upvotes: 0

Views: 359

Answers (1)

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7455

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

Upvotes: 1

Related Questions