Welcome Login

Eliminate horizontal jumps by forcing a right scroll bar


With a website with multiple pages, the layout can appear to horizontally 'jump' when going back and forth between pages that require right scroll bars and pages that do not.

This is because the 16px width of the right scroll bar in the browser window causes the content area to become narrower and the wrap div re-centers itself in the narrower content area, causing the content jump left.

To fix, you can force a right scroll bar onto every page, regardless if they need it or not by adding the following css (applied to the html element):

html { 
overflow-y:scroll; 
}

 

Outputs:

css-jump1

 

 

 

For more information, see here.

Or, here.

Or, to use an alternative method and explanation, see here.


Created on: Friday, November 2, 2012 by Andrew Sin