Javascript 这是禁用滚动的好方法吗？

当显示模式时，我需要禁用页面上底层内容的滚动。我遇到了这个代码来禁用页面滚动。（）

---

它似乎工作得很好，涵盖了所有可能的滚动方法（滚轮、鼠标中键等）。但是与设置overflow:hidden或其他方法相比，使用此方法有什么缺点吗？

这不是一个坏方法，但您也可以像下面那样切换

overflow:hidden

$("#lock").click(function() {
    scrollLock = !scrollLock;
    document.body.classList[scrollLock ? "add" : "remove"]("noScroll")
});

在这里

说明：

我考虑设置<代码>溢出：隐藏< /代码>更好的方式，因为它很简单，在某些浏览器中，手动设置滚动位置可能是跳跃性的。例如在Mac中，由于它的滚动效果。

我更喜欢将与

溢出

结合使用。这将完全禁用与给定DOM元素的所有交互，并将部分限制与其子元素的交互

.no-scroll {
    overflow: hidden;
    pointer-events: none;
}

如果您只想在用户执行某个操作后或出于任何其他原因禁用滚动，则可以有条件地将此类应用于代码

---

因为您使用jQuery，所以可以使用它的

addClass

和

removeClass

函数来打开和关闭这个类。您还可以使用

切换类

，具体取决于首选项。我个人不喜欢使用它，因为

addClass

和

removeClass

让我感觉更能掌控局面。

这里的缺点是禁用滚动会激怒大多数用户。没有好的方法禁用滚动。为什么要禁用滚动？他们应该如何看到不适合的部分？如果我禁用JS会发生什么？禁用滚动意味着在模式窗口打开时是暂时的。问题是他知道这一点。我想你的答案应该解释为什么这样更好（如果是的话）。我使用Mac时只在Chrome和Safari中测试。不知道互联网之神IE的行为。@Barmar补充道，为什么我觉得这比手动设置滚动位置更好。为了更好的兼容性，也许最好使用jQuery

toggleClass

，因为他已经在使用jQuery.neat idea-我也喜欢这些替代OPs代码的方法，因为1）jQuery不是必需的，2）“由于滚动事件可以高速触发，因此事件处理程序不应执行诸如DOM修改之类的计算代价高昂的操作。”：

.no-scroll {
    overflow: hidden;
    pointer-events: none;
}