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

我在尝试将.html页面在Chrome上保持一致的宽度时遇到一个小问题，例如，我的页面（1）的内容很多，导致视口（正确的单词？）高度溢出，因此有一个垂直滚动条在该页面上（1）。在页面（2）上，我具有相同的布局（菜单，div，...等），但内容较少，因此其中没有垂直滚动条。

问题是，在页面（1）上，滚动条似乎将元素稍微向左推（累加了宽度？），而所有内容似乎都很好地位于页面（2）的中心

我仍然是HTML / CSS / JS的初学者，我非常相信这并不是那么困难，但是我没有运气找出解决方案。它确实可以在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-scrollbar的CSS：

body{
    overflow-x:hidden;
}

尝试看看这个：http : //jsfiddle.net/NQAzt/

免责声明：覆盖已被弃用。
如果绝对必须，您仍然可以使用此功能，但不要这样做。

这仅适用于WebKit浏览器，但我非常喜欢。与auto其他浏览器一样。

.yourContent{
   overflow-y: overlay;
}

这将使滚动条仅显示为叠加层，从而不会影响元素的宽度！

您需要做的就是添加：

html {
    overflow-y: scroll;
}

在您的css文件中，尽管您只是无法滚动，但无论是否需要它都将具有滚动条

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

大概

html {
    width: 100vw;
}

就是您想要的。

在计算宽度：100％或100vw时，Safari和Chrome等Webkit浏览器会从可见页面宽度中减去滚动条宽度。更多在DM卢瑟福的滚动和页面宽度。

尝试overflow-y: overlay改用。

我发现我可以添加

::-webkit-scrollbar { 
display: none; 
}

直接将其移到我的CSS上，这将使滚动条不可见，但仍然允许我滚动（至少在Chrome上）。当您不想在页面上使用分散注意力的滚动条时非常有用！

对于具有固定宽度的容器，可以通过将容器包装到另一个div并将相同的宽度应用于两个div来实现纯CSS跨浏览器解决方案。

#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的示例

目前，我的其他答案似乎还不太正确（但我将继续尝试使其正常运行）。

但是基本上，您需要做的以及它试图动态进行的工作是将内容的宽度设置为略小于父级可滚动窗格的宽度。
这样，当滚动条出现时，对内容没有任何影响。

本示例通过对widths 进行硬编码，而不是尝试使浏览器通过来为我们完成此任务，从而展示了一种更为灵活的方法来实现该目标padding。
如果可行，如果您不希望使用永久滚动条，这是最简单的解决方案。

_{编辑：此答案目前还不太正确，请参考我的其他答案以查看我在此处尝试做的事情。我正在尝试对其进行修复，但是如果您可以提供帮助，请在评论中提供帮助，谢谢！}

使用padding-right将减轻滚动条的突然出现

例

从圆点可以看出，无论是否存在滚动条，文本都会在换行前到达页面中的同一点。
这是因为在引入滚动条时，填充物隐藏在其后面，因此滚动条不会压入文本！

.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;
}