Forcing Vertical Scrollbar Gutter to Show to Prevent Page Shift while Using swffit

Update: This fix is no longer necessary. When explaining it to a coworker, we discovered a new version of swffit with a new method called showScrollV() that does the same thing.

A common problem with centered web site layouts is what’s been dubbed “page shift.” This happens as users move among pages that are too short for a vertical scrollbar and those that are long enough to require them, or when a page has expanding and collapsing content which forces the scrollbar to appear and disappear as the content is manipulated. When the scrollbar’s state changes, the page recenters itself so the content jumps back and forth horizontally.

Page shift is especially distracting on a page where the content resizes without refreshing the page (like in Flash) because you can see everything move. When you’re clicking through different pages, it’s not as big a deal because a new page wipes out items for a split second before the shift occurs. Nonetheless, it can be distracting and there is a CSS fix for it.

html {
overflow-y: scroll;
}

This tells the browser that we’ll be scrolling things vertically, so keep the y scrollbar ready (IE always keeps the scrollbar gutter there, but it’s an issue on other browsers).

When it comes to Flash sites, using the browser’s built in scrollbars is a great technique. Some people like to create their own scrollbars in Flash, but that takes time and things get a bit more complicated when you want to get the scroll wheel working. Why not use the built in version, whose usability is already established, instead of reinventing the (scroll – heh) wheel?

Luckily we have a great script, swffit, that can help us use our browsers’ scrollbars by allowing us to change our SWF’s height on demand. Unfortunately, swffit overwrites the CSS that fixes the page shift problem, so I had to adjust the script a touch. In swffit.js, search for

html.style.overflow="auto";

and change it to

html.style.overflowX="auto";
html.style.overflowY="scroll";

and you’ll be able to use swffit without seeing any page shift.

  • Mike

    Thanks! Just what I was looking for.