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

Question

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

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

jsfiddle

Answer 1

你可以添加这个:

html {
     overflow-y:scroll;
}

body 元素将 overflow hidden (正如您已经拥有的那样)，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); 
});

然后在隐藏叠加层时取消绑定(bind)事件:

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

在这种情况下，您不需要 noscroll 类。

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