css - CSS - 防止滚动但保留滚动条

Question

我overflow:hidden用来防止在显示叠加层时滚动正文。问题是这会删除滚动条，因此整个页面会向右移动一点。当覆盖层被移除并且溢出设置回自动时，它会再次移动。

有没有办法解决这个问题？我想冻结文档滚动，但想防止页面跳来跳去。

jsfiddle

Answer 1

你可以添加这个：

html {
     overflow-y:scroll;
}

该body元素将隐藏溢出（因为您已经拥有它），并且该html元素将只显示一个空滚动条。这有效，因为您碰巧拥有html并body设置在height:100%.

演示：http: //jsfiddle.net/BCX64/3/

或者，您可以在显示叠加层时阻止这样的滚动：

// Find current scroll positions
var top = $(window).scrollTop();
var left = $(window).scrollLeft()

$(window).scroll(function(){
    // Force scroll back to original positions
    $(this).scrollTop(top).scrollLeft(left); 
});

然后在隐藏叠加层时取消绑定事件：

$(window).unbind('scroll');

在这种情况下，您不需要该noscroll课程。

演示：http: //jsfiddle.net/BCX64/6/

Answer 2

如果您创建一个假滚动条并将其放在右侧怎么办......您也可以自定义设计。