javascript - 如何防止浏览器出现 "jerking"页面

Question

这是什么“抽搐”- 在此页面上向右滚动到顶部，然后如果您使用的是 Mac，请使用两根手指并向上滚动更多...页面将进一步向上滚动(页面向下移动)显示灰色区域并在您的手指离开触摸板后反弹回来。

问题是如何使用 CSS 或 JavaScript 防止这种“抽搐”效果？

我知道这是可能的，因为如果你去 facebook 或 pinterest 并点击一张图片，你会看到一个灯箱。在该灯箱“模式”中，您不会获得这种“抽搐”效果。

我最初认为这与灯箱或 css 固定定位有关，但即使在 http://lokeshdhakar.com/projects/lightbox2/ 中也是如此“模式”它仍然“ SCSS ”。 fb 和 pinterest 是怎么做到的？

附言。使用 Chrome 或 Safari 。 firefox 没有这个效果。

Answer 1

Facebook 似乎通过在显示图片时在文档主体上设置 CSS 属性“溢出:隐藏”来实现这一点。我刚刚通过将以下 CSS 添加到 HTML 文件来亲自测试它，并且禁用了反弹滚动。

<style type="text/css">
body {
    overflow: hidden;
}
</style>

当然，这会完全阻止您的页面滚动。我同意 Quentin 的观点，这是标准的 UI 行为，除非有充分的理由，否则不应更改它。