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

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

当前回答

像这样简单地设置容器元素的宽度就可以了

width: 100vw;

这将使该元素忽略滚动条，并与背景颜色或图像一起工作。

其他回答

像这样简单地设置容器元素的宽度就可以了

width: 100vw;

这将使该元素忽略滚动条，并与背景颜色或图像一起工作。

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

CSS文件类型:

body{overflow-y:scroll;}

就这么简单!：）

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

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

滚动总是显示，可能是不好的布局。

尝试使用css3限制主体宽度

body {
    width: calc(100vw - 34px);
}

Vw是视口的宽度(看这个链接了解一些解释) 在css3中进行Calc计算 34px代表双滚动条宽度(如果你不相信固定大小，请参阅此计算)

用这个来扩展答案:

body {
    width: calc(100vw - 17px);
}

一位评论者建议添加左填充以保持居中:

body {
    padding-left: 17px;
    width: calc(100vw - 17px);
}

但是如果你的内容比视口宽，事情看起来就不对了。为了解决这个问题，你可以使用媒体查询，像这样:

@media screen and (min-width: 1058px) {
    body {
        padding-left: 17px;
        width: calc(100vw - 17px);
    }
}

1058px =内容宽度+ 17 * 2

这让水平滚动条处理x溢出，并在视口足够宽以包含固定宽度的内容时保持居中内容

推荐文章