显示div时如何禁用滚动？

Question

我想在显示 div 时禁用页面滚动，因为它是一个画廊，滚动会破坏它的功能。

            $(document).ready(function () {
                if($("#lightbox").css('display') == 'none') {
                    console.log("not hidden");
                    document.body.style.overflow = "auto";
                } else if($("#lightbox").css('display') == 'block') {
                    document.body.style.overflow = "hidden";
                    console.log("hidden");
                }
            });

我可以在控制台中看到“未隐藏”，这意味着该功能有效，但是当我单击打开图库（显示 div）时它不会隐藏滚动。我试过只用别的，同样的东西。

提前致谢。

Answer 1

里面的代码：

$(document).ready(function () {

表示您的页面已完全加载，它将被执行，并且它只是一个 1-time 事件。

所以你必须在点击“打开相册”按钮时绑定一个事件，检查lightbox的状态：

$("#openGaleryId").click(function(){
    if($("#lightbox").css('display') == 'none') {
       console.log("not hidden");
       document.body.style.overflow = "auto";
    } else if($("#lightbox").css('display') == 'block') {
        document.body.style.overflow = "hidden";
        console.log("hidden");
    }
});