如果你有一些容器，你正在使用作为包装你的网站内容，比如导航和页脚，你可以添加以下内容:

min-height: 101vh;

这将“延长”你的页面1vh，以确保滚动条永远不会消失，宽度保持不变。

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

300px是对话框窗口宽度的一半。

这是唯一对我有效的方法。

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

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

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

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

就像这样:

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/

目前我的另一个答案似乎不太正确(但我会继续尝试让它运行)。

但基本上你需要做的，也是它动态尝试做的，是将内容的宽度设置为略小于父滚动窗格的宽度。 因此，当滚动条出现时，它对内容没有影响。

这个例子展示了一种更hack的方式来实现这个目标，通过硬编码宽度，而不是试图让浏览器通过填充来为我们做。 如果这是可行的，这是最简单的解决方案，如果你不想要一个永久的滚动条。

我在Chrome浏览器上也遇到了同样的问题。只有在滚动条始终可见的情况下才会发生这种情况。(在一般设置中找到)我有一个模式，当我打开模式时，我注意到……

body {
    padding-left: 15px;
}

被添加到主体中。为了阻止这种情况发生，我补充道

body {
    padding-left: 0px !important;
}