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


当前回答

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

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

其他回答

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

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

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

我不这么认为。但样式体与溢出:滚动应该做。不过你好像知道。

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

我不想要一个永久的滚动条(已接受的解决方案),我也决定不使用负边距。他们没有(立即)为我在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);”。但我不能说它是否在所有情况下都一样。

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

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