Description
Tutorial for fixing the "page shift" problem that happens on loading pages of different lengths or when page's length changes with scripts
Date of the Tutorial
Tue Aug 18 18:56:03 2009
hasLayout.net
Fixing "Page Shift" Problem
Overview
In this tutorial I won't be covering any "break-through" methods. I will talk about a problem about which a lot of people seem to ask and I finally got sick and tired of explaining what is going on and how to fix it.
What's Going On, Man?
You are working on the site and then you notice that when you click through several pages the site shifts horizontally by several pixels and you wonder wtf is up. The answer is: scrollbar.
The shift happens when you click from page with little content (no vertical scrollbar) and land on a page with lots of content (vertical scrollbar appears). The problem becomes more apparent when you have some nifty-crifty scripts on the page that hide/show large piece of content and, depending on the state, the scrollbar appears and disappears.
Chances are you won't notice that in IE7 because by default it got the "fix" already in place.
Here's a demo with a scripted button that hides/shows large chunk of text demonstrating page-shift problem.
Overflow The Solution
The problem happens because in [most] browsers the overflow on ' element"><body> element is set to auto, thus the scrollbars are visible only when there's enough content to require them.
What we will do is change the vertical scrollbar to always show with CSS3 overflow-y property. Note: this property exists in CSS3 and therefore will not validate using CSS2.1 validator profile - just ignore the error. Let's have a look:
The fixed demo is shown on a separate page.
- CSS Code:
html { overflow-y: scroll; }
Not much to it; overflow-y set to value scroll on ' element"><html> element causes [modern] browsers and IE to always display vertical scrollbar, effectively elimitating the "page shift" problem.
If you are wondering why in the beginning I was talking about overflow on ' element"><body> element, yet we are setting it on ' element"><html> element, then I would recommend you to read Section 11.1.1 of CSS 2.1 Specification along with my "IE 6 and 7 Document Scrollbars Overflow Inconsistency" write up. Enjoy!