如何防止滚动条重新定位网页?

我有一个网站与中心对齐的DIV。现在，一些页面需要滚动，一些不需要。当我从一种类型移动到另一种类型时，滚动条的出现将页面移向一侧几个像素。有没有什么方法可以避免这种情况，而不显式地在每个页面上显示滚动条?

当前回答

overflow-y:scroll是正确的，但你应该使用它与html标签，而不是身体，否则你会得到一个双滚动条在ie7 所以正确的css应该是:

html {
  overflow-y: scroll;
}

其他回答

我试图修复可能由twitter bootstrap .modal-open类应用于body引起的相同问题。解决方案html {overflow-y: scroll}不起作用。我发现的一个可能的解决方案是添加{width: 100%;宽度:100vw}到HTML元素。

html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

的例子。点击“改变最小高度”按钮。

使用calc(100vw - 100%)我们可以计算滚动条的宽度(如果它不显示，它将是0)。想法:使用负margin-right，我们可以将<html>的宽度增加到这个宽度。你会看到一个水平滚动条-它应该隐藏使用overflow-x: hidden。

overflow-y:scroll是正确的，但你应该使用它与html标签，而不是身体，否则你会得到一个双滚动条在ie7 所以正确的css应该是:

html {
  overflow-y: scroll;
}

扩展Rapti的答案，这应该是一样的工作，但它增加了更多的边距正文的右侧，并隐藏它与负html边距，而不是增加额外的填充，可能会影响页面的布局。这样，实际页面(在大多数情况下)不会发生任何更改，代码仍然具有功能。

html {
    margin-right: calc(100% - 100vw);
}
body {
    margin-right: calc(100vw - 100%);
}

我知道这个问题很老了，但是有一个更好的新方法。

scrollbar-gutter: stable;

推荐文章