Question

我需要在显示模式时禁用页面上底层内容的滚动。我遇到了这个代码来禁用页面滚动。（http://jsfiddle.net/77P2e/）

var $window = $(window), previousScrollTop = 0, scrollLock = false;

$window.scroll(function(event) {     
    if(scrollLock) {
        $window.scrollTop(previousScrollTop); 
    }

    previousScrollTop = $window.scrollTop();
});

$("#lock").click(function() {
    scrollLock = !scrollLock;
});

它似乎运行良好并涵盖所有可能的滚动方法（滚轮，鼠标中键等）。但是，与设置overflow：hidden或其他方法相比，使用它有什么不利之处吗？

Answer 1

我更愿意将pointer-events与overflow结合使用。这将完全禁用与给定DOM元素的所有交互，并将部分限制与其子元素的交互。

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

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

因为你使用jQuery，你可以使用它的addClass和removeClass函数来打开和关闭这个类。您也可以使用toggleClass，具体取决于偏好。我个人更喜欢不使用它，因为addClass和removeClass让我感觉更有控制力。

Answer 2

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

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

demo此处。

<强>解释

我考虑设置overflow: hidden更好的方法，因为它简单，在某些浏览器中手动设置滚动位置可能会很跳跃。例如，由于其滚动效果，在Mac中。

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

2 个答案: