我正在尝试创建一个“单页”网络应用程序,其风格与 Gmail、Google Docs、Evernote 等相同。在这种情况下,允许惯性滚动在页面上猛拉是没有意义的。
这是我试图禁用的效果的视频:
http://tinypic.com/r/2eb6fc5/8
我们怎样才能做到这一点? Disable elastic scrolling in Safari中列出了解决方案但它们很旧,不能在 OSX Chrome 上运行,而 Gmail/Google Docs/Evernote 显然有一个适用于所有 OSX 浏览器的解决方案。
最佳答案
2020 年 5 月更新
关于浏览器兼容性,禁用惯性滚动时有一系列注意事项。这是一个试图抽象出那些兼容性问题的仓库: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/