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.

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
Anson Kao
  • 5,256
  • 4
  • 28
  • 37
  • 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. – Christiaan Westerbeek Oct 31 '17 at 20:28
  • @ChristiaanWesterbeek if you REALLY wanna get technical, I guess it would be called dampened scrolling =D – Anson Kao Nov 03 '17 at 02:24

3 Answers3

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.

Anson Kao
  • 5,256
  • 4
  • 28
  • 37
  • 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. – Dylan Jan 27 '20 at 14:01
3

This works on MacOS and iOS:

overscroll-behavior-y: none;
Jonathan
  • 1,007
  • 16
  • 12
  • 2
    Yes, this stops `bounce` effect (inertia) visually, but js `wheel` event is still called after the swipe on trackpad, cause of inertia. – Starwave Sep 25 '20 at 11:52
  • This isn't supported in Safari at all. Can you share an example please? – Alinaki Sep 02 '21 at 08:53
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

Community
  • 1
  • 1
PinkMonkeyBird
  • 11
  • 4