在Chrome和Edge上遇到了同样的问题，滚动条的额外宽度(不是在FireFox上)。

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

    body.no-scrolling {
    overflow: hidden;
    }

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

所以，一个对我有效的解决方案:

    html{
    width: 100vw;
    }

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

     body{
     overflow-x: hidden;
     }

如果对你也有帮助，请告诉我。

免责声明:覆盖已弃用。 你仍然可以使用它，如果你绝对必须，但尽量不要这样做。

这只适用于WebKit浏览器，但我非常喜欢它。 将在其他浏览器中表现为auto。

.yourContent{
   overflow-y: overlay;
}

这将使滚动条只显示为覆盖层，从而不影响元素的宽度!

我用这种方法解决了滚动条的类似问题:

首先禁用垂直滚动条设置它的:

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没有滚动条。

在Chrome和Edge上遇到了同样的问题，滚动条的额外宽度(不是在FireFox上)。

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

    body.no-scrolling {
    overflow: hidden;
    }

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

所以，一个对我有效的解决方案:

    html{
    width: 100vw;
    }

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

     body{
     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/

body {
    width: calc( 100% );
    max-width: calc( 100vw - 1em );
}

工作与默认滚动条以及。 可以添加:

overflow-x: hidden;

以确保水平滚动条对父帧保持隐藏。除非你的客户希望你这么做。