在Chrome上防止滚动条与页面宽度相加

Question

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

问题是，在第（1）页上，滚动条似乎将元素稍微向左推了一下（加总宽度？）而所有的一切都以第（2）页为中心

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

Answer 1

您只需添加：

html {
    overflow-y: scroll;
}

在你的css文件中，这将有滚动，无论它是否需要，尽管你只是不能滚动

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

Answer 2

免责声明：已不推荐使用覆盖。
如果万不得已，您仍然可以使用它，但尽量不要使用。

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

.yourContent{
   overflow-y: overlay;
}

这将使滚动条仅作为覆盖显示，从而不影响您的元素的宽度！

Answer 3

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

类似这样的事情：

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://jsfidle.net/nqazt/