我有一个小问题，试图保持我的。html页面在Chrome上的宽度一致。
例如，我有一个页面(1)，其中有很多内容超出了视口的高度，因此该页面(1)上有一个垂直滚动条。在页面(2)上，我有相同的布局(菜单，div，…等)，但内容更少，所以没有垂直滚动条。
问题在于，在第(1)页上，滚动条似乎将元素稍微推到左边(增加宽度?)，而在第(2)页上，所有内容似乎都处于正中央。
我仍然是HTML/CSS/JS的初学者，我相信这并不难，但我没有运气找到解决方案。它在IE10和FireFox(无干扰滚动条)上都能正常工作，我只在Chrome上遇到过。
当前回答
编辑:这个答案目前还不太正确，请参考我的另一个答案，看看我在这里试图做什么。我正在努力解决它，但如果你能提供帮助，请在评论中这样做，谢谢!
使用右填充将减轻滚动条的突然出现
例子
从点状图中可以看出，无论滚动条是否存在，文本在换行前都会到达页面中的同一点。 这是因为当滚动条被引入时，填充隐藏在它后面，所以滚动条不会推送文本!
其他回答
我在Chrome浏览器上也遇到了同样的问题。只有在滚动条始终可见的情况下才会发生这种情况。(在一般设置中找到)我有一个模式，当我打开模式时，我注意到……
body {
padding-left: 15px;
}
被添加到主体中。为了阻止这种情况发生，我补充道
body {
padding-left: 0px !important;
}
可能
html {
width: 100vw;
}
正是你想要的。
我也遇到过类似的问题。我试着在鼠标悬停时滚动，但它一直在推东西，导致糟糕的用户体验。我找到了一个简单的解决办法。我保持滚动条在它的位置，但使它透明，当光标悬停在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>
我的头部导航也有类似的问题。我的大多数页面都有足够的内容来触发滚动，除了一页。
我的头部导航有一个flexContainer，有2个子容器(中间有空格)。flexContainer有一个5rem左右填充。
头{padding-left: calc(100vw - 100%;)} 通过添加滚动条，将其添加到头部，从而使内容处于中心位置 向左的宽度。元素现在居中，但我们有 有效地缩小页眉宽度滚动条宽度。
flexContainer {padding: 0rem calc(5rem - calc((100vw - 100%)/2));} 我添加回滚动条宽度减少 flexContainer填充。
这确保我的内容保持在适当的位置，无论是否触发滚动。
在Chrome和Edge上遇到了同样的问题，滚动条的额外宽度(不是在FireFox上)。
项目中的逻辑是在悬停在某个容器上后停止滚动。所以我在body中添加了一个类:
body.no-scrolling {
overflow: hidden;
}
这有助于防止滚动，但删除了滚动条。在FireFox中，这不是问题，但在Chrome和Edge中，内容会填充滚动条的空间，并使页面的内容向右移动。
所以，一个对我有效的解决方案:
html{
width: 100vw;
}
该规则阻止内容在滚动条消失后立即移动，但增加了额外的宽度，并在页面底部显示滚动条。为了隐藏额外的宽度，我添加了:
body{
overflow-x: hidden;
}
如果对你也有帮助，请告诉我。
