Disable inertia scroll for "single-page" webapp
Solution 1
Update May/2020
There are an array of considerations when disabling inertia scroll, with respect to browser compatibility. Here is a repo which attempts to abstract away those compatibility problems: https://github.com/willmcpo/body-scroll-lock
This repo attempts to reconcile drawbacks in both older solutions listed below:
Update Jan/2019
There's a simpler CSS solution:
body {
overflow: hidden;
}
Original Answer:
I found a perfect solution - override the scroll events.
$body.addEventListener("mousewheel", function(e){ e.preventDefault(); });
Turns out that inertia scroll is really just an extension of normal scrolling, where a special mouse driver emits scroll events in such a way as to emulate the inertia effect. So overriding scroll events inherently prevents inertia scroll.
See this link for examples with cross-platform compatibility.
Solution 2
This works on MacOS and iOS:
overscroll-behavior-y: none;
Solution 3
You're just using the wrong keywords. I found this:
document.body.addEventListener('touchmove',function(e){
e.preventDefault();});
But this is not a proper solution. It's better to wrap your content in some div, and use css property on it:
-webkit-overflow-scrolling: touch;
Here are some helpful links on "bouncing" here and here
Related videos on Youtube
Anson Kao
Hi! My name is Anson, and I'm based out of Toronto. I'm an entrepreneur with a decade-long background in technology, startups, and more recently: video. I love bringing people together to create the future.
Updated on June 16, 2022Comments
-
Anson Kao over 1 year
I'm trying to create a "single-page" web-app, in the same style as Gmail, Google Docs, Evernote, etc. where it doesn't make sense to allow inertia scroll to yank at the page.
Here is a video of the effect I'm trying to disable:
http://tinypic.com/r/2eb6fc5/8
How can we accomplish this? There are solutions listed in Disable elastic scrolling in Safari but they are old, don't work on OSX Chrome, while Gmail/Google Docs/Evernote clearly have a solution that works on all OSX browsers.
-
Anson Kao almost 9 yearsI'm asking for OSX, not iOS
-
Dylan almost 4 yearsAdding overflow: hidden is not a simple one liner fix. It may work, but depending on your site could break scrolling functionality. Make sure to test.
-
Starwave about 3 yearsYes, this stops
bounce
effect (inertia) visually, but jswheel
event is still called after the swipe on trackpad, cause of inertia. -
Alinaki about 2 yearsThis isn't supported in Safari at all. Can you share an example please?