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

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

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

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


当前回答

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

就像这样:

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的方式来实现这个目标,通过硬编码宽度,而不是试图让浏览器通过填充来为我们做。 如果这是可行的,这是最简单的解决方案,如果你不想要一个永久的滚动条。

免责声明:覆盖已弃用。 你仍然可以使用它,如果你绝对必须,但尽量不要这样做。

这只适用于WebKit浏览器,但我非常喜欢它。 将在其他浏览器中表现为auto。

.yourContent{
   overflow-y: overlay;
}

这将使滚动条只显示为覆盖层,从而不影响元素的宽度!

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

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

    body.no-scrolling {
    overflow: hidden;
    }

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

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

    html{
    width: 100vw;
    }

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

     body{
     overflow-x: hidden;
     }

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

我不能对第一个答案发表评论,而且已经很久了……但这个演示有一个问题:

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop('scrollHeight')总是等于b.height(),

我认为应该是这样的:

if(b.prop('scrollHeight')>window.innerHeight) ...

最后我推荐一个方法:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}

对于具有固定宽度的容器,纯CSS跨浏览器解决方案可以通过将容器包装到另一个div中并对两个div应用相同的宽度来实现。

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

点击这里查看Codepen的示例