我有一个小问题,试图保持我的。html页面在Chrome上的宽度一致。

例如,我有一个页面(1),其中有很多内容超出了视口的高度,因此该页面(1)上有一个垂直滚动条。在页面(2)上,我有相同的布局(菜单,div,…等),但内容更少,所以没有垂直滚动条。

问题在于,在第(1)页上,滚动条似乎将元素稍微推到左边(增加宽度?),而在第(2)页上,所有内容似乎都处于正中央。

我仍然是HTML/CSS/JS的初学者,我相信这并不难,但我没有运气找到解决方案。它在IE10和FireFox(无干扰滚动条)上都能正常工作,我只在Chrome上遇到过。


当前回答

滚动条槽不支持旧浏览器

所以这里是js的解决方案支持旧浏览器

在scrollView样式的box-sizing中设置boxSizing: 'border-box"不起作用

但是当scrollView被渲染时,js scrollView.style. boxsizing = "border-box",使渲染像scroll-gutter:stable

其他回答

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

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

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

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

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

    body.no-scrolling {
    overflow: hidden;
    }

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

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

    html{
    width: 100vw;
    }

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

     body{
     overflow-x: hidden;
     }

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

滚动条槽不支持旧浏览器

所以这里是js的解决方案支持旧浏览器

在scrollView样式的box-sizing中设置boxSizing: 'border-box"不起作用

但是当scrollView被渲染时,js scrollView.style. boxsizing = "border-box",使渲染像scroll-gutter:stable

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

body {
    padding-left: 15px;
}

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

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

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

就像这样:

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/