Grow your CSS skills. Land your dream job.

Last updated on:

Prevent Bounce Scroll in Lion

Just make sure you zero out the margin and padding on those elements as well (normal in any reset or normalization).

html, body {
  height: 100%;
  overflow: hidden;
}

Reference URL

Comments

  1. Paulo
    Permalink to comment#

    As a Lion user, please don’t do that on your website. Don’t take out my bouncing fun..

  2. I agree, I like bouncy scrolling. If it’s all the same to you, leave it.

  3. Billyg
    Permalink to comment#

    What? no get rid of it. At what point did the user need some stupid extraneous bouncing to let you know you were at the bottom of a page? surely the fact that it has stopped scrolling is enough.

  4. Nabil Gardon
    Permalink to comment#

    I’m sorry, but this code hides whatever is outside of the base visible rectangle. In other words, this code prevents scrolling all together…

    And I agree, bounce scroll is hideous, and really useless. I would love to disable it as an iPad user…

  5. I’m behind this bit of CSS. The bounces can mess with some elements as it treats the bounce area as part of the document… also I find a lot of the time your nice smooth momentum scroll suddenly turns to jerky, bad frame rate rendering as it comes to a stop. A solid stop is fine!

  6. Oleg
    Permalink to comment#

    Well, it could make sense if bounce scrolling wasn’t a part of OS X / iOS common user experience. You want your website to scroll the way you’re used to, but user actually wants it to behave the way he is used to.

    If you «stand out the crowd» making your site scroll the different way, user will eventually notice it.

    But, will he like it?

    It reminds me of awful user experience on Windows®, where half of apps are skinned in their own fancy way.

  7. Permalink to comment#

    It might not be good UX, but in some cases you really need to get rid of the bouncy scrolling.

    But how can we get rid of it without hiding the scrollbars?

Leave a Comment

Current day month ye@r *

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