overflow: overlay 解释

overflow: overlay 是 CSS 中的一个属性值，用于指定一个元素在内容溢出时如何处理滚动。与传统的 overflow: auto 或 overflow: scroll 不同，overflow: overlay 会在内容溢出时显示滚动条，但它会覆盖在内容上方，而不会改变容器的尺寸。

特点

• 滚动条覆盖内容：滚动条会浮在内容上方，不会占用内容的空间，从而不会影响布局。
• 适用于 macOS Safari：在 macOS 的 Safari 浏览器中，滚动条默认是隐藏的，只有在用户滚动内容时才会显示出来。overflow: overlay 可以让滚动条在内容溢出时显示，但不会占据实际内容的空间，这样可以更好地保持布局的稳定性和一致性。

使用场景

• 固定布局：当需要保持容器的固定尺寸，且不希望滚动条占用内容空间时，overflow: overlay 是一个理想的选择。
• macOS 环境：在 macOS 系统中，使用 overflow: overlay 可以提供更一致的用户体验，因为滚动条不会改变容器的尺寸。

浏览器兼容性

overflow: overlay 是一个实验性特性，浏览器兼容性有限。目前，Chrome、Edge、Safari 和 Opera 之前有些版本支持该属性，但最新版本的主流浏览器已不再支持。

替代方案

由于 overflow: overlay 的兼容性问题，建议使用其他方法来实现类似的效果。例如，可以使用 scrollbar-gutter: stable 属性来确保滚动条不会影响内容的布局。

.scrollbar {
  overflow: auto;
  scrollbar-gutter: stable;
}

总结

overflow: overlay 是一个有用的 CSS 属性值，但在现代浏览器中支持有限。如果需要实现类似的效果，建议使用 scrollbar-gutter: stable 作为替代方案。