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

Question

我有一个小问题，试图让我的 .html 页面在 Chrome 上保持一致的宽度，例如我有一个页面 (1) 有很多内容溢出视口的（正确的词？）高度，所以有一个垂直滚动条在该页面 (1) 上。在第 (2) 页上，我有相同的布局（菜单、div 等），但内容较少，所以那里没有垂直滚动条。

问题是，在第 (1) 页上，滚动条似乎将元素略微向左推（加起来到宽度？），而所有内容都很好地集中在第 (2) 页上

我仍然是 HTML/CSS/JS 的初学者，我相当确信这并不难，但我没有找到解决方案的运气。它在 IE10 和 FireFox（无干扰滚动条）上确实可以正常工作，我只在 Chrome 上遇到过这种情况。

原文由 Acemad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以获取滚动条大小，然后对容器应用边距。

像这样的东西：

 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/

原文由 Lwyrn 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 Chrome 和 Edge（不是在 FireFox 上）上遇到滚动条额外宽度的相同问题。

项目中的逻辑是在某个容器上悬停后停止滚动。所以我在正文中添加了一个类：

     body.no-scrolling {
    overflow: hidden;
    }

这有助于防止滚动，但删除了滚动条。在 FireFox 中这不是问题，但在 Chrome 和 Edge 中，内容会填充滚动条的空间并使页面内容向右移动。

所以一个对我有用的解决方案：

     html{
    width: 100vw;
    }

此规则阻止滚动条消失后内容立即移动，但增加了额外的宽度并在页面底部出现滚动条。为了隐藏我添加的额外宽度：

      body{
     overflow-x: hidden;
     }

让我知道它是否也对您有帮助。

原文由 Double-w-B 发布，翻译遵循 CC BY-SA 4.0 许可协议