javascript - 如何锁定滚动条并使其可见

Question

当用户点击任何公寓时，我会出现一个对话框。

如果视口高度大于 550px，我想要做的是锁定滚动条。现在我适用overflow:hidden于正文，但这会导致滚动条隐藏时站点跳转。我想禁用滚动，但仍显示滚动条。可能吗？

提前致谢！

Answer 1

您可以通过检测滚动来模拟滚动条锁定，然后滚动回之前的位置..（这在某些浏览器上可能会显得生涩，特别是如果您拖动滚动条本身）

function lockScroll() {
    var lockX = window.scrollX;
    var lockY = window.scrollY;

    function lockIt() {
        window.scrollTo(lockX,lockY);
        return false;
    }

    window.addEventListener("scroll",lockIt,false)

    return {
        stop: function(){
            window.removeEventListener("scroll",lockIt,false)
        }
    }
}

用法：

var locker = lockScroll(); // locks scrolling

完成后，您可以重新启用滚动

locker.stop();  // unlocks scrolling