Currently, all my pages are designed with the standard fixed-width-margin-left-right-auto layout.
.container{
width:900px;
margin:0 auto;
}
An issue arises when some of these pages exceed the height of the window, requiring a vertical scroll bar to appear on the right side. Consequently, switching between these longer pages and shorter ones causes the main container to shift slightly (about half the width of the vertical scrollbar). This occurs due to changes in the width of the parent element (body).
Is there a library or workaround available to prevent this behavior, aside from using body{overflow-y:scroll;}?
In response to @Mateusz:
Thank you for your suggestion, Mateusz. I tested the following code:
console.log($('body')[0].offsetHeight+' '+$('body')[0].scrollHeight+' '+$('html'[0].offsetHeight+' '+$('html')[0].scrollHeight);
The test results are as follows:
document smaller than window document larger than window
firefox 1012 1012 1008 1362 1012 1012 1008 1007
chrome/ie 549 1525 545 545 549 545 545 545
It appears that different browsers exhibit varying behaviors, with different comparison thresholds (1 and 4).