Proper scrollbar page shift fix

05 October 2011

You've probably heard this many times in calls with clients: "My page shifts 15 pixels to the left when I go from this page to that page" and there are a few fixes, but this one from HTML5 boilerplate is the best.



I know it's "just how the browsers scrollbars behave", but when a client persists you've got to come up with a solution. And to be honest: always having a scrollbar in your page ís in fact lesser evil than the content shifting between pages.

One of the fixes that is being used a lot is the height: 101% fix, but that isn't a nice fix. At all. It's better to use this little fix I borrowed from the HTML5 Boilerplate:

html {
    overflow-y: scroll;
}

This adds a scrollbar to every page, even if the page isn't long at all. This doesn't work in older IE browsers (6 and 7), but that doesn't matter because IE adds the scrollbar anyway.
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

1 comment

  1. Gravatar

    Esurb

    04 March 2012

    Thanks a bunch! Fixed my whole site in Windows & Linux with recent Firefox and Opera browsers. I tried a couple of the other methods. This is the best fix and seems to be the proper one for the moment.