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

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

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

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

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

overflow-x: hidden;

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

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

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

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

我的头部导航也有类似的问题。我的大多数页面都有足够的内容来触发滚动，除了一页。

我的头部导航有一个flexContainer，有2个子容器(中间有空格)。flexContainer有一个5rem左右填充。

头{padding-left: calc(100vw - 100%;)} 通过添加滚动条，将其添加到头部，从而使内容处于中心位置 向左的宽度。元素现在居中，但我们有 有效地缩小页眉宽度滚动条宽度。

flexContainer {padding: 0rem calc(5rem - calc((100vw - 100%)/2));} 我添加回滚动条宽度减少 flexContainer填充。

这确保我的内容保持在适当的位置，无论是否触发滚动。

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

就像这样:

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/

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

min-height: 101vh;

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