禁用“单页"惯性滚动.网路应用程式 [英] Disable inertia scroll for "single-page" webapp

问题描述

我正在尝试创建一种与Gmail，Google Docs，Evernote等相同的样式的单页" Web应用程序，在这种情况下不允许惯性滚动到该页面.

I'm trying to create a "single-page" web-app, in the same style as Gmail, Google Docs, Evernote, etc. where it doesn't make sense to allow inertia scroll to yank at the page.

以下是我要禁用的效果的视频:

Here is a video of the effect I'm trying to disable:

http://tinypic.com/r/2eb6fc5/8

我们如何做到这一点? 在Safari中禁用弹性滚动中列出了解决方案，但是这些解决方案已经过时了，请不要可以在OSX Chrome上运行，而Gmail/Google文档/Evernote显然具有可以在所有OSX浏览器上运行的解决方案.

How can we accomplish this? There are solutions listed in Disable elastic scrolling in Safari but they are old, don't work on OSX Chrome, while Gmail/Google Docs/Evernote clearly have a solution that works on all OSX browsers.

推荐答案

更新May/2020

在禁用惯性滚动时，考虑到浏览器兼容性，有很多注意事项.这是一个尝试提取这些兼容性问题的存储库: https://github.com/willmcpo/body-scroll-lock

There are an array of considerations when disabling inertia scroll, with respect to browser compatibility. Here is a repo which attempts to abstract away those compatibility problems: https://github.com/willmcpo/body-scroll-lock

此回购尝试解决下面列出的两个较旧解决方案中的缺点:

This repo attempts to reconcile drawbacks in both older solutions listed below:

更新Jan/2019

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

There's a simpler CSS solution:

body {
    overflow: hidden;
}

---

原始答案:

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

I found a perfect solution - override the scroll events.

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

事实证明，惯性滚动实际上只是普通滚动的扩展，在这种情况下，特殊的鼠标驱动程序以模仿惯性效果的方式发出滚动事件.因此，覆盖滚动事件本质上可以防止惯性滚动.

Turns out that inertia scroll is really just an extension of normal scrolling, where a special mouse driver emits scroll events in such a way as to emulate the inertia effect. So overriding scroll events inherently prevents inertia scroll.

请参阅此链接以获取具有跨平台兼容性的示例.

这篇关于禁用“单页"惯性滚动.网路应用程式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！