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

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

当前回答

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

width: 100vw;

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

其他回答

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

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

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

尝试使用css3限制主体宽度

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

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

我已经在我的一个网站上解决了这个问题，通过显式地在javascript中设置主体的宽度为视口大小减去滚动条的宽度。我使用这里记录的基于jQuery的函数来确定滚动条的宽度。

<body id="bodyid>

var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";

用这个来扩展答案:

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溢出，并在视口足够宽以包含固定宽度的内容时保持居中内容

与公认的答案相反，即使内容没有溢出屏幕，也建议在浏览器窗口上使用永久滚动条，我更喜欢使用:

html{
  height:101%;
}

这是因为如果内容溢出，滚动条的外观更有意义。

这个比这个更有意义。

推荐文章