OSX - disable inertia scroll for “single-page” webapp

问题

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.

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/28103125/osx-disable-inertia-scroll-for-single-page-webapp