防止滚动条加到Chrome的宽度页面上
我有一个小问题，试图保持我的.html页面在Chrome浏览器上的一致的宽度，例如我有一个页面（1）有很多内容溢出视口的（右字？）高度，所以有一个垂直滚动条（1）。 在页面（2）我有相同的布局（菜单，divs，…等），但较less的内容，所以没有垂直滚动条在那里。
问题是，在页面（1）上滚动条似乎将元素稍微向左推动（加起来的宽度？），而在页面（2）
我仍然是HTML / CSS / JS的初学者，我相当确信这不是那么困难，但是我找不到解决scheme。 它在IE10和FireFox（无干扰的滚动条）上按预期工作，我只在Chrome上遇到过。
你可以得到滚动条的大小，然后对容器应用一个边距。
像这样的东西：
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'}); } } 删除h滚动条的CSS：
body{ overflow-x:hidden; }
试着看看这个： http : //jsfiddle.net/NQAzt/
所有你需要做的是添加：
html { overflow-y: scroll; }
在你的CSS文件，因为这将有滚动无论是否需要或不，但你将无法滚动
这意味着这两个视口将具有相同的宽度
老线程，但仍然相关！
这只适用于WebKit浏览器 ，但我喜欢它。
.yourContent{ overflow-y: overlay; }
这将使滚动条仅作为覆盖层出现，因此不会影响元素的宽度 ！
Webkit浏览器（如Safari和Chrome）在计算宽度时，从可见页面宽度中减去滚动条宽度：100％或100vw。 更多在卢瑟福的滚动和页面宽度 。
尝试使用overflow-y: overlay来代替。
我发现我可以添加
::-webkit-scrollbar { display: none; }
直接到我的CSS，它会使滚动条不可见，但仍然允许我滚动（至less在Chrome上）。 当你不想在你的页面上分散注意力的滚动条的时候很好！
现在看来我的其他答案似乎没什么问题（但是我会继续努力使之运作起来）。
但是基本上你需要做什么以及dynamic做什么，就是将内容的宽度设置为比父，可滚动窗格的宽度略小。
所以当滚动条出现时，它对内容没有任何影响。
这个例子显示了通过对width进行硬编码而不是试图让浏览器通过padding来为我们实现这个目标的一种更加棘手的方式。
如果这是可行的，这是最简单的解决scheme，如果你不想永久滚动条。
大概
html { width: 100vw; }
正是你想要的。
编辑：这个答案目前不是很正确，请参阅我的其他答案，看看我在这里试图做什么。 我正在尝试修复它，但是如果您可以在评论中提供帮助，谢谢！
使用padding-right将减轻滚动条的突然出现
例
正如你可以从圆点看到的那样，不pipe滚动条是否存在，文本在包装之前都会将其转到页面中的相同位置。
这是因为当滚动条被引入时，填充符隐藏在它后面，所以滚动条不会推动文本！
.modal-dialog { position: absolute; left: calc(50vw - 300px); }
其中300像素是我的对话框窗口宽度的一半。
这实际上是唯一对我有用的东西。
