我正在尝试创建一个“单页”网络应用程序,其风格与 Gmail、Google Docs、Evernote 等相同。允许惯性滚动在页面上猛拉是没有意义的。
这是我尝试禁用的效果的视频:
http://tinypic.com/r/2eb6fc5/8
我们怎样才能做到这一点? Disable elastic scrolling in Safari 中列出了一些解决方案,但它们很旧,不适用于 OSX Chrome,而 Gmail/Google Docs/Evernote 显然有一个适用于所有 OSX 浏览器的解决方案。
最佳答案
更新 2020 年 5 月
关于浏览器兼容性,禁用惯性滚动时有一系列注意事项。这是一个试图抽象出这些兼容性问题的 repo:https://github.com/willmcpo/body-scroll-lock
这个 repo 试图调和下面列出的两个旧解决方案中的缺点:
更新 2019 年 1 月
有一个更简单的 CSS 解决方案:
body {
overflow: hidden;
}
原始答案:
我找到了一个完美的解决方案 - 覆盖滚动事件。
$body.addEventListener("mousewheel", function(e){ e.preventDefault(); });
事实证明,惯性滚动实际上只是正常滚动的扩展,其中特殊的鼠标驱动程序以模拟惯性效果的方式发出滚动事件。因此,覆盖滚动事件本质上可以防止惯性滚动。
See this link for examples with cross-platform compatibility.
关于javascript - 禁用 "single-page"webapp 的惯性滚动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28103125/