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

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