如何避免滚动条挤压容器内容？

优化滚动条挤压容器内容

我们已经知道可以通过设置overflow: overlay来避免滚动条挤压容器内容。但有时我们希望找到兼容性更佳的解决方案。

使用 Scrollbar Gutter

在 CSS 中，我们可以使用scrollbar-gutter属性来解决此问题：

div {
  scrollbar-gutter: stable;
}

stable值表示稳定，告诉浏览器提前预留滚动条的位置。这将确保在滚动条出现时，容器内容不会晃动。

scrollbar-gutter属性的兼容性如下图所示：

通过使用scrollbar-gutter，我们可以实现与overflow: overlay类似的效果，但具有更好的兼容性。