阻止滚动条添加到Chrome上的页面宽度

Question

我有一个小问题试图让我的.html页面在Chrome上保持一致的宽度,例如我有一个页面(1),其中有很多内容溢出了视口(右词？)的高度,所以有一个垂直滚动条在那页(1).在页面(2)我有相同的布局(菜单,div,...等)但内容较少,所以没有垂直滚动条.

问题是,在页面(1)上,滚动条似乎将元素略微向左推(加到宽度？),而所有内容都显示在页面(2)的中心位置

我仍然是HTML/CSS/JS的初学者,我相信这并不是那么困难,但我没有找到解决方案的运气.它确实在IE10和FireFox(非干扰滚动条)上工作,我只在Chrome上遇到过这种情况.

Answer 1

旧线程但仍然相关!

这仅适用于WebKit浏览器,但我非常喜欢它.将表现得像auto在其他浏览器上.

.yourContent{
   overflow-y: overlay;
}

这将使滚动条仅作为叠加显示,从而不影响元素的宽度!

Answer 2

2021 年的解决方案是使用scrollbar-gutter，它将滚动条将使用的空间永久添加到元素中。

使用

.element-class {
   scrollbar-gutter: stable both-edges;
}

both-edges是可选的。

另请参阅https://caniuse.com/mdn-css_properties_scrollbar-gutter和https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

overflow: overlay已弃用。

这是一个用于澄清不同可能性的代码笔：https://codepen.io/waxolunist/pen/ExweBMz

Answer 3

您需要做的就是添加:

html {
    overflow-y: scroll;
}

在你的css文件中,因为这将是滚动条是否需要它虽然你只是无法滚动

这意味着视口将具有相同的宽度

Answer 4

您可以获取滚动条大小,然后将余量应用于容器.

像这样的东西:

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: //jsfiddle.net/NQAzt/

Answer 5

大概

html {
    width: 100vw;
}

正是你想要的.

Answer 6

在计算宽度时,Safari和Chrome等Webkit浏览器会从可见页面宽度中减去滚动条宽度:100%或100vw.更多关于DM卢瑟福的滚动和页面宽度.

请尝试使用overflow-y: overlay.

Answer 7

我发现我可以添加

::-webkit-scrollbar { 
display: none; 
}

直接到我的CSS,它会使滚动条不可见,但仍允许我滚动(至少在Chrome上).当你不想在你的页面上有一个令人分心的滚动条时,这对你有好处!

Answer 8

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

也适用于默认滚动条。可以添加：

overflow-x: hidden;

以确保水平滚动条对于父框架保持隐藏。除非您的客户希望这样做。

Answer 9

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

#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上的示例