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

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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