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

Question

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

如果视口(viewport)高度大于 550 像素，我想做的是锁定滚动条。现在我将 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