为 "single-page" webapp 禁用惯性滚动

Question

我正在尝试创建一个 "single-page" 网络应用程序，其风格与 Gmail、Google Docs、Evernote 等相同，但不允许惯性滚动在页面上猛拉。

这是我试图禁用的效果的视频：

我们怎样才能做到这一点？ Disable elastic scrolling in Safari 中列出了解决方案，但它们是旧的，不适用于 OSX Chrome，而 Gmail/Google Docs/Evernote 显然有一个适用于所有的解决方案OSX 个浏览器。

Answer 1

您只是使用了错误的关键字。我发现了这个：

document.body.addEventListener('touchmove',function(e){
    e.preventDefault();});

但这不是一个合适的解决方案。最好将您的内容包装在一些 div 中，并在其上使用 css 属性:

 -webkit-overflow-scrolling: touch;

"bouncing" 上有一些有用的链接 here and here

Answer 2

更新May/2020

在浏览器兼容性方面，禁用惯性滚动时有一系列注意事项。这是一个试图抽象出那些兼容性问题的回购协议：https://github.com/willmcpo/body-scroll-lock

这个 repo 试图调和下面列出的两个旧解决方案中的缺点：

更新Jan/2019

有一个更简单的 CSS 解决方案：

body {
    overflow: hidden;
}

原答案：

我找到了一个完美的解决方案——覆盖滚动事件。

$body.addEventListener("mousewheel", function(e){ e.preventDefault(); });

事实证明，惯性滚动实际上只是普通滚动的扩展，其中特殊的鼠标驱动程序以模拟惯性效果的方式发出滚动事件。所以覆盖滚动事件本质上可以防止惯性滚动。

See this link for examples with cross-platform compatibility.

Answer 3

这适用于 MacOS 和 iOS:

overscroll-behavior-y: none;

Disable inertia scroll for "single-page" webapp