Grow your CSS skills. Land your dream job.

Remove Page-Shift in FF due to Scrollbar

  • # February 26, 2009 at 2:33 pm

    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.

    # February 26, 2009 at 9:24 pm

    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:
    http://css-tricks.com/eliminate-jumps-i … croll-bar/

    Rob
    # February 27, 2009 at 4:55 am
    "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

    # February 27, 2009 at 11:01 am

    But doesn’t that apply to all browsers? IE, for example, doesn’t need that. It will automatically show a scroll bar regardless of content height. Not 100% sure what Safari does.

    # November 30, 2009 at 9:50 pm

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

    # December 1, 2009 at 12:10 am

    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?

    # December 11, 2009 at 8:14 pm
    "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

    # August 12, 2010 at 4:11 pm

    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>

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".