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

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

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

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


当前回答

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

工作与默认滚动条以及。 可以添加:

overflow-x: hidden;

以确保水平滚动条对父帧保持隐藏。除非你的客户希望你这么做。

其他回答

我也遇到过类似的问题。我试着在鼠标悬停时滚动,但它一直在推东西,导致糟糕的用户体验。我找到了一个简单的解决办法。我保持滚动条在它的位置,但使它透明,当光标悬停在div上时将它带回来。由于滚动条总是在那里,它不会修改div的其他元素的设计。

$(document).ready(function() { $('#list-parent').hover( function() { $("#list-parent").removeClass('scrollbar-invisible'); $("#list-parent").addClass('scrollbar'); }, function() { $("#list-parent").addClass('scrollbar-invisible'); $("#list-parent").removeClass('scrollbar'); }); }) .main-div { height: 100px; width: 400px; overflow: hidden; } .list-parent { height: 100px; background-color: yellow; overflow: scroll; padding:20px; width:150px; } .scrollbar-invisible::-webkit-scrollbar{ border: 3px solid #ffffff00; width: 5px; height: 20px; } .scrollbar::-webkit-scrollbar { width: 5px; height: 20px; } .scrollbar::-webkit-scrollbar-thumb { border-radius: 100vh; border: 3px solid black; padding-left: 20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="app" class='main-div'> <div id ='list-parent' class='list-parent scrollbar-invisible'> <div style='background-color:pink'> <h1> Todos: </h1> <ol> <li>Test Item </li> <li>Test Item </li> <li>Test Item </li> <li>Test Item </li> <li>Test Item </li> <li>Test Item </li> <li>Test Item </li> </ol> </div> </div> </div>

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

正是你想要的。

目前我的另一个答案似乎不太正确(但我会继续尝试让它运行)。

但基本上你需要做的,也是它动态尝试做的,是将内容的宽度设置为略小于父滚动窗格的宽度。 因此,当滚动条出现时,它对内容没有影响。

这个例子展示了一种更hack的方式来实现这个目标,通过硬编码宽度,而不是试图让浏览器通过填充来为我们做。 如果这是可行的,这是最简单的解决方案,如果你不想要一个永久的滚动条。

如果你有一些容器,你正在使用作为包装你的网站内容,比如导航和页脚,你可以添加以下内容:

min-height: 101vh;

这将“延长”你的页面1vh,以确保滚动条永远不会消失,宽度保持不变。