Remove Page-Shift in FF due to Scrollbar

[TheDoc]

Just add this little nugget to your HTML element in your CSS file:

Code:

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

Done! This can be a very frustrating problem for people that don’t quite see exactly what is causing the page shift.

[Chris Coyier]

That’s a good one, I haven’t used that before I don’t think. It’s a tricky subject actually. Since some browsers experience the "jump" between not having a scroll bar and having a scrollbar (on centered sites) and some do not.

The technique I typically use is:

Code:

overflow-y: scroll;

…which actually doesn’t validate (who cares).

A while back I tried a bunch of different ways:
https://css-tricks.com/eliminate-jumps-i … croll-bar/

[Rob MacKay]

"chriscoyier" wrote:

The technique I typically use is:

Code:

overflow-y: scroll;

…which actually doesn’t validate (who cares).

hehe me too :) and no it dosnt validate lol

[cybershot]

nope, got it working. all is good. thanks for the sollution

[AshtonSanders]

Sweet guys. This is brilliant. I had no idea.

"chriscoyier" wrote:

Code:

overflow-y: scroll;

…which actually doesn’t validate (who cares).

Both options listed in this thread don’t validate:

Quote:

html Value Error : overflow -moz-scrollbars-vertical is not a overflow value : -moz-scrollbars-vertical
html Property overflow-y doesn’t exist in CSS level 2.1 but exists in [css3] : scroll

btw, is there a way to say that your CSS file is css3?

[lookslikepat]

"AshtonSanders" wrote:

btw, is there a way to say that your CSS file is css3?

Nope, but I wouldn’t be surprised if it popped up in the future.
In the meantime we’ll just have to do
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fcss-tricks.com%2F&profile=css3

[[email protected]]

I’m sure everyone knows this by now, but…

<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">Valid CSS 3</a>

[Author]

Posts