Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)

UPDATE 2017.12: For non-Safari browsers you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on the <body> and be done with it.

Safari however still requires the workaround detailed below …

Know this bouncy overscrolling behaviour that browsers have been doing whenever you reach the “edge” of the page its contents?

elastic-scrolling
Bram.us, with bounce scroll

Sometimes – in fullscreen apps for example – you’ll want to disable this. Now, there’s no need to resort to JavaScript and hijack touchstart, as the little CSS snippet below can prevent the rubber band scrolling:

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

Tested with iOS8, iOS9, and iOS10.

However, as this snippet disables *all* scrolling on the body, if you want to retain scrolling on your page (but now without the overscroll effect) 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:

<html>
…
<body>
  <div class="mainwrapper">
    …
  </div>
</body>
</html>
body > .mainwrapper {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* enables “momentum” (smooth) scrolling */
}

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)

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

22 Comments

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

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

    I can’t seem to find anything :[

  2. 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?

Leave a comment

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.