Disable inertia scroll for "single-page" webapp

13,837

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

Share:
13,837

Related videos on Youtube

Anson Kao
Author by

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, 2022

Comments

  • Anson Kao
    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
    Anson Kao almost 9 years
    I'm asking for OSX, not iOS
  • Dylan
    Dylan almost 4 years
    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.
  • Starwave
    Starwave about 3 years
    Yes, this stops bounce effect (inertia) visually, but js wheel event is still called after the swipe on trackpad, cause of inertia.
  • Alinaki
    Alinaki about 2 years
    This isn't supported in Safari at all. Can you share an example please?