如何摆脱滚动条弹出页面位置？

Question

我有一个带有标签的页面，可以显示各种高度的内容，其中一些需要滚动条，而另一些则不需要。在这些内容之间切换的视觉效果有点烦人，因为当窗口滚动条弹出时，它会将整个页面向左移动一点。

我尝试过/考虑过的事情：

1. 滚动条总是可见 - 它可以工作，但我不喜欢它。
2. 将正文宽度设置为 98% - 显然这仍然是窗口的 98%，它会调整大小，所以仍然会弹出。将其设置为像素值是可行的，但人们的屏幕尺寸不同。
3. 用脚本补偿窗口宽度损失 - 是一个相当简单的脚本，但很有趣，由滚动条出现触发的窗口调整大小不会触发窗口的调整大小事件，我还没有找到任何其他合适的事件来附加它.

有人知道将页面容器保持在适当位置的好方法吗？

Answer 1

我猜你可以在body 中添加一个带有margin/padding 的类，然后用jQuery 将其删除。这样做的缺点是不同的浏览器具有不同的滚动条宽度，例如 mac 上的 safari 甚至没有可见的滚动条。所以建议只是让滚动条一直可见。

Answer 2

正确答案是

html { width: 100vw; }