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

小编典典

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

html

我在尝试将.html页面在Chrome上保持一致的宽度时遇到一个小问题，例如，我的页面（1）的内容很多，导致视口（正确的单词？）高度溢出，因此有一个垂直滚动条在该页面上（1）。在页面（2）上，我具有相同的布局（菜单，div，…等），但内容较少，因此其中没有垂直滚动条。

问题是，在页面（1）上，滚动条似乎将元素稍微向左推（累加了宽度？），而所有内容似乎都很好地位于页面（2）的中心

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

阅读 350

2020-05-10

共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-scrollbar的CSS：

body{
    overflow-x:hidden;
}

2020-05-10