Disable inertia scroll for "single-page" webapp
Asked Answered
B

3

7

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.

Bitters answered 23/1, 2015 at 4:37 Comment(2)
The effect shown in the video is not called inertial scrolling. Inertial scrolling is what occurs if you swipe the touch surface on the mouse and release the finger. It continues to scroll even after letting it go. That's inertial scrolling.Isobar
@ChristiaanWesterbeek if you REALLY wanna get technical, I guess it would be called dampened scrolling =DBitters
B
5

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.

Bitters answered 27/1, 2015 at 22:34 Comment(1)
Adding 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.Orpha
J
4

This works on MacOS and iOS:

overscroll-behavior-y: none;
Jag answered 20/6, 2020 at 8:28 Comment(2)
Yes, this stops bounce effect (inertia) visually, but js wheel event is still called after the swipe on trackpad, cause of inertia.Foscalina
This isn't supported in Safari at all. Can you share an example please?Mealworm
F
1

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

Fart answered 23/1, 2015 at 4:44 Comment(1)
I'm asking for OSX, not iOSBitters

© 2022 - 2024 — McMap. All rights reserved.