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:

html,
body {
  position: fixed;
  overflow: hidden;
}

Tested with iOS8, and iOS9.

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 might 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 , , ,

6 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.

Leave a Reply

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