• Home
• Portfolio
• Articles
• Contact

Firefox Scrollbar 'jump'

By Ewan

April 7, 2008

Working on a project today, I encountered a problem which has bugged me for ages when developing layouts using CSS for Firefox browser.

In Firefox, the scroll-bar only displays if the content takes up more than 100% of the browser window height. This proves a problem when switching between pages that do not take up 100% and pages which do - it causes the page to appear to 'jump', as Firefox adds the vertical scroll-bar to the right.

This is not a problem using IE, because the scrollbar is always visible, whether it is in use or not.

To overcome this problem is quite simple. We add an html rule to our CSS document as below;

html { overflow: -moz-scrollbars-vertical; }

This tidy little one liner will now display the scroll-bar in FF whether it is in use or not, preventing the page from giving the 'jump' effect.

Alternatively you can apply the following;

html { height: 101%; }

This tricks Firefox into reading that there is 1% more vertical space at the bottom of the page and therefore will display the vertical scroll-bar.

More Articles

Comments (3)

Add Comment

matt.com
Matt - Sep 21, 2008 9:28 PM

Safari 3.0.4, the html { height: 101%; } trick seems to work just fine.

www.claramendes.com
Clara - Nov 28, 2008 9:01 PM

You saved my life!!!!!!!!! jeeezz, how happy i am now.
can u imagine??? many days thrown away...

Thanks
Alex - Oct 08, 2009 8:32 PM

Ewan, you rock.