Prevent the Browser Scrollbar Causing Centred Content Jumping

With current trends in website design with fixed width content, leaning towards centred, rather than left aligned, content jump is being seen more often.

This is when the content grows past the bottom of the window, cauing the browser scrollbar to appear, which causes the centre position of the page to move, which in turn causes the content to quickly jump a few pixels to the left. How annoying, especially when you have spent ages getting anything else looking exactly right.

This is not a problem in IE, as the scrollbar is always displayed.

Good news is we can work around this by forcing all browsers to always display the scrollbar, like IE does. When the content is contained within the page the scrollbar will be visible, but disabled.

Simply add the following CSS to your pages and the jumping stops.

html {
overflow-y: scroll;
}

Done..