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

Question

当用户点击任何公寓时,我会出现一个对话框.你可以在这里查看它的工作原理:点击这里

我想要做的是在视口高度大于550px时锁定滚动条.现在我应用于overflow:hiddenbody,但这会导致站点在滚动条隐藏时跳转.我想禁用滚动,但仍显示滚动条.可能吗？

提前致谢!

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