我有一个小问题，试图保持我的。html页面在Chrome上的宽度一致。
例如，我有一个页面(1)，其中有很多内容超出了视口的高度，因此该页面(1)上有一个垂直滚动条。在页面(2)上，我有相同的布局(菜单，div，…等)，但内容更少，所以没有垂直滚动条。
问题在于，在第(1)页上，滚动条似乎将元素稍微推到左边(增加宽度?)，而在第(2)页上，所有内容似乎都处于正中央。
我仍然是HTML/CSS/JS的初学者，我相信这并不难，但我没有运气找到解决方案。它在IE10和FireFox(无干扰滚动条)上都能正常工作，我只在Chrome上遇到过。
当前回答
body {
width: calc( 100% );
max-width: calc( 100vw - 1em );
}
工作与默认滚动条以及。 可以添加:
overflow-x: hidden;
以确保水平滚动条对父帧保持隐藏。除非你的客户希望你这么做。
其他回答
您可以获取滚动条大小，然后对容器应用边距。
就像这样:
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
如果你有一些容器，你正在使用作为包装你的网站内容，比如导航和页脚，你可以添加以下内容:
min-height: 101vh;
这将“延长”你的页面1vh，以确保滚动条永远不会消失，宽度保持不变。
在Chrome和Edge上遇到了同样的问题，滚动条的额外宽度(不是在FireFox上)。
项目中的逻辑是在悬停在某个容器上后停止滚动。所以我在body中添加了一个类:
body.no-scrolling {
overflow: hidden;
}
这有助于防止滚动，但删除了滚动条。在FireFox中，这不是问题，但在Chrome和Edge中，内容会填充滚动条的空间，并使页面的内容向右移动。
所以，一个对我有效的解决方案:
html{
width: 100vw;
}
该规则阻止内容在滚动条消失后立即移动，但增加了额外的宽度，并在页面底部显示滚动条。为了隐藏额外的宽度，我添加了:
body{
overflow-x: hidden;
}
如果对你也有帮助，请告诉我。
滚动条槽不支持旧浏览器
所以这里是js的解决方案支持旧浏览器
在scrollView样式的box-sizing中设置boxSizing: 'border-box"不起作用
但是当scrollView被渲染时，js scrollView.style. boxsizing = "border-box"，使渲染像scroll-gutter:stable
