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


当前回答

如果改变大小或加载一些数据后,它是添加滚动条,然后你可以尝试以下,创建类和应用这个类。

.auto-scroll {
   overflow-y: overlay;
   overflow-x: overlay;
}

其他回答

我曾经有过这样的问题,但是解决它的简单方法是这样的(这对我来说很有效):

CSS文件类型:

body{overflow-y:scroll;}

就这么简单!:)

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

html {
  overflow-y: scroll;
}

我不知道这是否是一个旧帖子,但我有同样的问题,如果你想垂直滚动,你应该尝试溢出-y:滚动

由于我还没有找到我的解决方案,我想补充它:

我不想要一个永久的滚动条(已接受的解决方案),我也决定不使用负边距。他们没有(立即)为我在chrome浏览器工作,我也不希望有内容可能消失在滚动条下面。

这是一个填充解决方案。

我的网页由三部分组成:

标题(内容左对齐) MainContent(内容居中) 页脚(内容左右对齐)

因为左边填充会让标题看起来很糟糕,而且logo应该留在页面的角落,所以我保持它不变,因为滚动条的出现在大多数情况下不会影响它(除非窗口宽度非常小)。

因为均匀的填充对于MainContent和footer都是可以接受的,我只对这两个容器使用下面的css:

.main-content, .footer {
    /*
     * Set the padding to the maximum scrollbar width minus the actual scrollbar width.
     * Maximum scrollbar width is 17px according to: https://codepen.io/sambible/post/browser-scrollbar-widths 
     */
    padding-right: calc(17px - (100vw - 100%));
    padding-left: 17px;
}

这将保持MainContent在正确的中心,也适用于所有滚动条宽度不超过17px的滚动条。可以为具有覆盖滚动条的移动设备添加一个媒体查询,删除这些填充。 这个解决方案类似于只添加左侧填充,并设置宽度为“width: calc(100vw - 17px);”。但我不能说它是否在所有情况下都一样。

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

scrollbar-gutter: stable;