禁用“单页”网络应用程序的惯性滚动

Question

我正在尝试创建一个“单页”网络应用程序，其风格与 Gmail、Google Docs、Evernote 等相同。在这些应用程序中，允许惯性滚动拉动页面是没有意义的。

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

我们怎样才能做到这一点？在 Safari 中禁用弹性滚动中列出了一些解决方案，但它们很旧，不适用于 OSX Chrome，而 Gmail/Google Docs/Evernote 显然有一个适用于所有 OSX 浏览器的解决方案。

Answer 1

2020 年 5 月更新

禁用惯性滚动时，需要考虑一系列与浏览器兼容性相关的注意事项。这是一个试图抽象出这些兼容性问题的存储库：https://github.com/willmcpo/body-scroll-lock

此存储库尝试协调下面列出的两个旧解决方案中的缺点：

2019 年 1 月更新

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

body {
    overflow: hidden;
}

原答案：

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

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

事实证明，惯性滚动实际上只是正常滚动的扩展，其中特殊的鼠标驱动程序以模拟惯性效果的方式发出滚动事件。因此，覆盖滚动事件本质上会阻止惯性滚动。