禁用 "单页 "网页应用的惯性滚动。

Question

我试图创建一个 "单页 "的web应用，风格和Gmail、Google Docs、Evernote等一样，在这个应用中，让惯性滚动来拽页面是没有意义的。

下面是我要禁用的效果视频。

http:/tinypic.comr2eb6fc58

我们如何才能做到这一点呢？有一些解决方案列在 在Safari中禁用弹性滚动 但它们都很老了，在OSX Chrome上不能用，而GmailGoogle DocsEvernote显然有一个在所有OSX浏览器上都能用的解决方案。

Answer 1

更新五月2020

在禁用惯性滚动时，有一系列关于浏览器兼容性的考虑。这里有一个repo，试图抽象出这些兼容性问题。https:/github.comwillmcpobody-scroll-lock.

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

2019年1月更新

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

body {
    overflow: hidden;
}

---

原答案：

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

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

原来，惯性滚动其实只是普通滚动的延伸，一个特殊的鼠标驱动会发出滚动事件来模拟惯性效果。所以覆盖滚动事件本质上是防止惯性滚动的。

请看这个链接，有跨平台兼容的例子。

Answer 2

你只是用错了关键词。我找到了这个。

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

但这不是一个正确的解决方案。最好的办法是把你的内容包裹在某个div中，然后使用css属性。

 -webkit-overflow-scrolling: touch;

这里有一些关于 "跳转 "的有用链接。此处而这里

Answer 3

这适用于MacOS和iOS。

overscroll-behavior-y: none;