UPDATE 2017.12: For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it.
html, body {
overscroll-behavior-y: none;
}Safari however does not support it …
UPDATE 2021.06: The workaround below no longer seems to work in recent iOS/MobileSafari versions (iOS 12+) … 😭. Follow Webkit bug #176454 to stay up-to-date on support in Safari.
Know this bouncy overscrolling behaviour that browsers have been doing whenever you reach the “edge” of the page its contents?
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, this snippet disables *all* scrolling on the body. If you want to retain scrolling on your page (but now without the overscroll effect), you need 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)
🔥 Like what you see? Want to stay in the loop? Here's how:
Not good enough.
Don’t know what you’re talking about this worked fine for me
body, body {}
what does it mean, is it a mistake
A mistake indeed. Should’ve been
html, bodyWorth pointing out that this prevents *any* scrolling when viewed in a browser.
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.
Any way to make this work with a site that’s been “Added to Homescreen”?
I can’t seem to find anything :[
This should work fine for a PWA. At least on ios 13 it is working perfect
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?
Does anyone agree that iOS is absolute garbage for this!!
Now all my absolute elements bounce like hell :))
thanks a lot. worked perfectly for me
thanks works perfect
i did following this guide but it still have bouncing effect when scrolling to bottom or top viewport ?
this destroys the whole website you dumbass
Not if you know what you are doing … or if you’ve read the entire post …
Thanks, It worked perfectly for me on chat page:)
Because you didn’t give position relative to their father’s elements.
Best answer. it worked for me.
What if content is more than 100vh
This works for me, but it creates some scrolling lag (in osx safari at least) sooo…no good 🙁
Thank you so much, it works as expected
This works but since the body is no larger than the screen size, the address bar will not minimise when scrolling down, not important for a lot of people but I’m working on a webapp and I realised this halfway through
It’s a shame we still need to fiddle with non-working workarounds for this in 2021. There is a standard CSS property out there, implemented by actually all other browser vendors but Apple simply refuses to adopt it…