Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Long pages in FireFox offset when scrollbar appears

Tags:

css

firefox

In Firefox and Safari, pages that are centered move a few pixels when the page is long enough for the scrollbar to appear. If you navigate through a site that has long and short pages, the page seems to "jump" around.

IE7 tends to leave the scroll bar visible all of the time but disables it when the page is not long enough. Since the width of the HTML window never changes the centering of the page doesn't change.

Is there a workaround or a way to style the page so it doesn't jump around in Firefox and Safari?

Thanks.

like image 855
Brian Behm Avatar asked Nov 22 '08 16:11

Brian Behm


People also ask

How do I make the scrollbar always visible in Firefox?

"On Windows, Firefox follows the system preference (System Preferences > Accessibility > Visual Effects > Always show scrollbars)."

How do I stop the scroll bar from moving in CSS?

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.

How do I hide scrollbar while scrolling in Firefox?

The Best Answer is. You can use the scrollbar-width rule. You can scrollbar-width: none; to hide the scrollbar in Firefox and still be able to scroll freely.


1 Answers

You could simply always enable the scrollbar:

html{
 overflow: scroll;
}

but that would give you the horizontal scrollbar too, this is better:

html{
   overflow-y:scroll;
   overflow-x:auto;
}

That will give you only the vertical scroll and the horizontal when needed.

like image 179
Pim Jager Avatar answered Sep 27 '22 21:09

Pim Jager