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

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

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

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


当前回答

编辑:这个答案目前还不太正确,请参考我的另一个答案,看看我在这里试图做什么。我正在努力解决它,但如果你能提供帮助,请在评论中这样做,谢谢!

使用右填充将减轻滚动条的突然出现

例子

从点状图中可以看出,无论滚动条是否存在,文本在换行前都会到达页面中的同一点。 这是因为当滚动条被引入时,填充隐藏在它后面,所以滚动条不会推送文本!

其他回答

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

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;
}

你所需要做的就是添加:

html {
    overflow-y: scroll;
}

在你的CSS文件中,无论是否需要,都会有滚动条,尽管你不能滚动。

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

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

Use

.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:不建议使用覆盖。

下面是一个代码依赖,用于澄清不同的可能性:https://codepen.io/waxolunist/pen/ExweBMz

可能

html {
    width: 100vw;
}

正是你想要的。

Safari和Chrome等Webkit浏览器在计算宽度时从可见页面宽度中减去滚动条宽度:100%或100vw。更多信息请参阅DM Rutherford的滚动和页面宽度。

试着用overflow-y: overlay代替。