我有一个小问题，试图保持我的。html页面在Chrome上的宽度一致。
例如，我有一个页面(1)，其中有很多内容超出了视口的高度，因此该页面(1)上有一个垂直滚动条。在页面(2)上，我有相同的布局(菜单，div，…等)，但内容更少，所以没有垂直滚动条。
问题在于，在第(1)页上，滚动条似乎将元素稍微推到左边(增加宽度?)，而在第(2)页上，所有内容似乎都处于正中央。
我仍然是HTML/CSS/JS的初学者，我相信这并不难，但我没有运气找到解决方案。它在IE10和FireFox(无干扰滚动条)上都能正常工作，我只在Chrome上遇到过。
当前回答
我在Chrome浏览器上也遇到了同样的问题。只有在滚动条始终可见的情况下才会发生这种情况。(在一般设置中找到)我有一个模式，当我打开模式时，我注意到……
body {
padding-left: 15px;
}
被添加到主体中。为了阻止这种情况发生，我补充道
body {
padding-left: 0px !important;
}
其他回答
免责声明:覆盖已弃用。 你仍然可以使用它，如果你绝对必须，但尽量不要这样做。
这只适用于WebKit浏览器，但我非常喜欢它。 将在其他浏览器中表现为auto。
.yourContent{
overflow-y: overlay;
}
这将使滚动条只显示为覆盖层，从而不影响元素的宽度!
您可以获取滚动条大小，然后对容器应用边距。
就像这样:
var checkScrollBars = function(){
var b = $('body');
var normalw = 0;
var scrollw = 0;
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
}
CSS删除h-滚动条:
body{
overflow-x:hidden;
}
试着看看这个: http://jsfiddle.net/NQAzt/
2021年的解决方案是使用scrollbar-gutter，它将滚动条使用的空间永久地添加到元素中。
Use
.element-class {
scrollbar-gutter: stable both-edges;
}
Both-edges是可选的。
参见https://caniuse.com/mdn-css_properties_scrollbar-gutter和https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
Overflow:不建议使用覆盖。
下面是一个代码依赖，用于澄清不同的可能性:https://codepen.io/waxolunist/pen/ExweBMz
对于具有固定宽度的容器，纯CSS跨浏览器解决方案可以通过将容器包装到另一个div中并对两个div应用相同的宽度来实现。
#outer {
overflow-y: auto;
overflow-x: hidden;
/*
* width must be an absolute value otherwise the inner divs width must be set via
* javascript to the computed width of the parent container
*/
width: 200px;
}
#inner {
width: inherit;
}
点击这里查看Codepen的示例
目前我的另一个答案似乎不太正确(但我会继续尝试让它运行)。
但基本上你需要做的，也是它动态尝试做的，是将内容的宽度设置为略小于父滚动窗格的宽度。 因此，当滚动条出现时，它对内容没有影响。
这个例子展示了一种更hack的方式来实现这个目标，通过硬编码宽度，而不是试图让浏览器通过填充来为我们做。 如果这是可行的，这是最简单的解决方案，如果你不想要一个永久的滚动条。
