防止滚动条增加到Chrome页面的宽度

我有一个小问题，试图保持我的。html页面在Chrome上的宽度一致。

例如，我有一个页面(1)，其中有很多内容超出了视口的高度，因此该页面(1)上有一个垂直滚动条。在页面(2)上，我有相同的布局(菜单，div，…等)，但内容更少，所以没有垂直滚动条。

问题在于，在第(1)页上，滚动条似乎将元素稍微推到左边(增加宽度?)，而在第(2)页上，所有内容似乎都处于正中央。

我仍然是HTML/CSS/JS的初学者，我相信这并不难，但我没有运气找到解决方案。它在IE10和FireFox(无干扰滚动条)上都能正常工作，我只在Chrome上遇到过。

当前回答

你所需要做的就是添加:

html {
    overflow-y: scroll;
}

在你的CSS文件中，无论是否需要，都会有滚动条，尽管你不能滚动。

这意味着两者的视口宽度相同。

其他回答

我在Chrome浏览器上也遇到了同样的问题。只有在滚动条始终可见的情况下才会发生这种情况。(在一般设置中找到)我有一个模式，当我打开模式时，我注意到……

body {
    padding-left: 15px;
}

被添加到主体中。为了阻止这种情况发生，我补充道

body {
    padding-left: 0px !important;
}

免责声明:覆盖已弃用。你仍然可以使用它，如果你绝对必须，但尽量不要这样做。

这只适用于WebKit浏览器，但我非常喜欢它。将在其他浏览器中表现为auto。

.yourContent{
   overflow-y: overlay;
}

这将使滚动条只显示为覆盖层，从而不影响元素的宽度!

你所需要做的就是添加:

html {
    overflow-y: scroll;
}

在你的CSS文件中，无论是否需要，都会有滚动条，尽管你不能滚动。

这意味着两者的视口宽度相同。

滚动条槽不支持旧浏览器

所以这里是js的解决方案支持旧浏览器

在scrollView样式的box-sizing中设置boxSizing: 'border-box"不起作用

但是当scrollView被渲染时，js scrollView.style. boxsizing = "border-box"，使渲染像scroll-gutter:stable

body {
    width: calc( 100% );
    max-width: calc( 100vw - 1em );
}

工作与默认滚动条以及。可以添加:

overflow-x: hidden;

以确保水平滚动条对父帧保持隐藏。除非你的客户希望你这么做。

推荐文章