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

标签 javascript css macos scroll single-page-application

我正在尝试创建一个“单页”网络应用程序,其风格与 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/

相关文章:

javascript - AngularJS中登录成功后才重定向到页面并隐藏菜单

Mac/Linux 和 Windows 上的 Ruby GUI 开发

javascript - jQuery 在 "select"操作后在 div 中显示文本?

javascript - 如何像在 chrome 中一样在 node.js 中使用提示功能

html - CSS改变hr标签的颜色

css - 我怎样才能使网格中的列响应

html - Chrome 中的 SVG 路径裁剪问题

windows - 在 Windows 和 OS X 中设置 FPU

ios - CGContextDrawImage 绘制大图像非常模糊

javascript - jQuery 雪插件不会在所有页面上显示相同数量的雪