我在尝试在 Chrome 上保持 .html 页面的宽度一致时遇到了一个小问题， 例如，我有一个页面 (1)，其中有很多内容超出了视口的（正确的词？）高度，因此该页面 (1) 上有一个垂直滚动条。在第 (2) 页上，我有相同的布局（菜单、div 等），但内容较少，因此没有垂直滚动条。
问题在于，在第 (1) 页上，滚动条似乎将元素稍微向左推（加起来到宽度？），而所有内容都很好地集中在第 (2) 页上
我仍然是 HTML/CSS/JS 的初学者，我相当确信这并不难，但我没有找到解决方案的运气。它在 IE10 和 FireFox（无干扰滚动条）上确实可以正常工作，我只在 Chrome 上遇到过这种情况。
【问题讨论】：
标签： html css google-chrome scrollbar
免责声明：叠加层已弃用。
如果绝对需要，您仍然可以使用它，但尽量不要。
这仅适用于 WebKit 浏览器，但我非常喜欢它。
在其他浏览器上的行为类似于 auto。
.yourContent{
overflow-y: overlay;
}
这将使滚动条仅显示为叠加层，因此不会影响元素的宽度！
【讨论】：
你需要做的就是添加：
html {
overflow-y: scroll;
}
在您的 css 文件中，因为无论是否需要滚动条，您都无法滚动
这意味着视口将具有相同的宽度
【讨论】：
大概
html {
width: 100vw;
}
正是你想要的。
【讨论】：
calc() 来确定主要内容视图的宽度，以便固定的屏幕外导航可以占据桌面屏幕的左侧，同时保留移动设备上的原生滚动。
<html>) 的宽度设置为 100 个 视口宽度单位。那是浏览器窗口的 100% 宽度。
您可以获取滚动条大小，然后对容器应用边距。
类似这样的：
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：
body{
overflow-x:hidden;
}
试着看看这个： http://jsfiddle.net/NQAzt/
【讨论】：
Safari 和 Chrome 等 Webkit 浏览器在计算宽度时从可见页面宽度中减去滚动条宽度：100% 或 100vw。更多信息请访问DM Rutherford's Scrolling and Page Width。
尝试改用overflow-y: overlay。
【讨论】：
我发现我可以添加
::-webkit-scrollbar {
display: none;
}
直接到我的 css，它会使滚动条不可见，但仍然允许我滚动（至少在 Chrome 上）。当您不想在页面上出现分散注意力的滚动条时非常适合！
【讨论】：
对于具有固定宽度的容器，纯 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;
}
【讨论】：
body {
width: calc( 100% );
max-width: calc( 100vw - 1em );
}
也适用于默认滚动条。 可以补充：
overflow-x: hidden;
确保水平滚动条对父框架保持隐藏。除非您的客户希望这样做。
【讨论】：
目前我的其他答案似乎不太正确（但我会继续尝试使其正常运行）。
但基本上你需要做的，以及它试图动态做的，是将内容的宽度设置为略小于父级可滚动窗格的宽度。
这样当滚动条出现时，它对内容没有影响。
这个EXAMPLE 展示了一种更老套的方式来实现这个目标，通过硬编码widths 而不是试图让浏览器通过padding 为我们完成它。
如果这是可行的，如果您不想要永久滚动条，这是最简单的解决方案。
【讨论】：
编辑：这个答案目前不太正确，请参阅我的其他答案，看看我在这里尝试做什么。我正在尝试修复它，但如果您能提供帮助，请在 cmets 中提供帮助，谢谢！
使用padding-right 将减轻滚动条的突然出现
从点中可以看出，无论是否存在滚动条，文本都会在换行前到达页面中的同一点。
这是因为当引入滚动条时，填充隐藏在它后面，所以滚动条不会推动文本！
【讨论】：
2021 年的解决方案是使用scrollbar-gutter，它将滚动条将使用的空间永久添加到元素。
使用
.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: overlay 已弃用。
【讨论】：
.modal-dialog {
position: absolute;
left: calc(50vw - 300px);
}
其中 300 像素是我的对话框窗口宽度的一半。
这实际上是唯一对我有用的东西。
【讨论】：
我在 Chrome 上遇到了同样的问题。仅当滚动条始终可见时才发生在我身上。 （在常规设置中找到）我有一个模态，当我打开模态时我注意到...
body {
padding-left: 15px;
}
被添加到正文中。为了阻止这种情况发生，我添加了
body {
padding-left: 0px !important;
}
【讨论】：
我无法为第一个答案添加评论，已经很久了......但是那个演示有问题：
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
b.prop('scrollHeight') 总是等于 b.height()，
我觉得应该是这样的：
if(b.prop('scrollHeight')>window.innerHeight) ...
最后我推荐一个方法：
html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
【讨论】：
我通过这种方式解决了滚动条的类似问题：
首先通过设置禁用垂直滚动条：
overflow-y: hidden;
然后制作一个位置固定的 div，高度等于屏幕高度，并使其宽度变细，看起来像滚动条。这个 div 应该可以垂直滚动。现在在这个 div 中创建另一个具有文档高度的 div（包含它的所有内容）。现在您需要做的就是在容器 div 中添加一个 onScroll 函数，并在 div 滚动时滚动主体。代码如下：
HTML：
<div onscroll="OnScroll(this);" style="width:18px; height:100%; overflow-y: auto; position: fixed; top: 0; right: 0;">
<div id="ScrollDiv" style="width:28px; height:100%; overflow-y: auto;">
</div>
</div>
然后在你的页面加载事件中添加：
JS：
$( document ).ready(function() {
var body = document.body;
var html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
document.getElementById('ScrollDiv').style.height = height + 'px';
});
function OnScroll(Div) {
document.body.scrollTop = Div.scrollTop;
}
现在滚动 div 就像滚动 body 而 body 没有滚动条一样。
【讨论】：