Prevent overscroll/bounce in iOS MobileSafari (CSS only)

elastic-scrolling No need to hijack touchstart via JavaScript as this little CSS snippet, preventing the rubber band scrolling (as shown on the left), works just fine:

body {
  position: fixed;
  overflow: hidden;

Tested with iOS8, iOS9, and iOS10.

As this snippet disables *all* scrolling on the body, you’ll want to make use of a scrollable wrapper that spans the entire window/screen and which wraps around your entire content. Like so:

.mainwrapper {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

You’ll most likely want to remove the margin and padding from the body too in that case

Note that your mileage may vary. Other pure CSS solutions do exist (untested though)

Elsewhere , , ,

15 Responses to Prevent overscroll/bounce in iOS MobileSafari (CSS only)

  1. mystrdat says:

    Not good enough.

  2. xiyan00 says:

    body, body {}
    what does it mean, is it a mistake

  3. Dave Everitt says:

    Worth pointing out that this prevents *any* scrolling when viewed in a browser.

    • Bramus! says:

      That’s correct. I’ve updated the post to include instructions to using a scrollable wrapper around your content. That way overscroll on the body is prevented, but scrolling of the content is maintained.

  4. JustinH says:

    Any way to make this work with a site that’s been “Added to Homescreen”?

    I can’t seem to find anything :[

  5. Andre says:

    While this works fine for a web page in a browser, it doesn’t seem to help with a Cordova hybrid app.. When I run my app, it’s almost like the WebView component itself is scrolling as opposed to something within the “html” element. I confirmed this by selecting the “html” element in VS2015’s DOM Inspector and watching the location of the DOM highlight while scrolling.

    All the solutions I’ve found end up disabling momentum scrolling completely, which results in another issue where iOS can’t scroll a page if the tap-drag starts on an “input” field.

    So, does anybody know of a way to get around this?

  6. Vicentiu says:

    Now all my absolute elements bounce like hell :))

  7. Pingback: Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior |

  8. tao says:

    thanks a lot. worked perfectly for me

  9. enav says:

    thanks works perfect

  10. Annk says:

    i did following this guide but it still have bouncing effect when scrolling to bottom or top viewport ?

  11. Pingback: Scroll Bouncing On Your Websites - ugurak

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.