Force Scrollbars

Page designs with a centred layout often appear to jump slightly to the side when navigating from page to page.

The Cause of pages jumping

Pages with content that is longer than the browser height will display a scrollbar, but pages where the content is shorter than the browser height will not display a scrollbar. The jump occurs when going from a page which displays a scrollbar to a page which does not display a scrollbar or vice versa.

The Solution

To prevent this jump from happening, we can force the browser scrollbar to appear on all pages. There are several ways of doing this by adding a little CSS to the stylesheet. My preferred method is to use the following css in the body tag.

body {
	overflow-y: scroll;
}