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:

How can we acplish 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.

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./r/2eb6fc5/8

How can we acplish 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.

• javascript
• css
• macos
• scroll
• single-page-application

• 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 Commented Oct 31, 2017 at 20:28
• @ChristiaanWesterbeek if you REALLY wanna get technical, I guess it would be called dampened scrolling =D – Anson Kao Commented Nov 3, 2017 at 2:24

3 Answers 3

Update May/2020

There are an array of considerations when disabling inertia scroll, with respect to browser patibility. Here is a repo which attempts to abstract away those patibility problems: https://github./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 patibility.

This works on MacOS and iOS:

overscroll-behavior-y: none;

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