AI 摘要：本文阐述了 scrollbar-gutter: stable; 在解决页面布局因滚动条出现与否而引起的内容跳动（layout shift）问题上的便利，同时指出它在某些场景下（如 iframe 环境或元素居中对齐）会导致“空白滚动条占位”以及视觉不居中的副作用。作者进一步提出一种利用 CSS Scroll State 查询的替代方案，通过检测页面是否可滚动来动态调整内边距，为未来更灵活的滚动状态响应式设计提供了思路。

1. 引入与背景
• 提到 Zach 建议在样式表中默认使用 scrollbar-gutter: stable;。
• 该属性能为滚动条预留空间，避免内容在滚动条出现或消失时的跳动。
• 应用场景：在系统设置为“始终显示滚动条”时尤为明显。

2. scrollbar-gutter: stable; 的优点与原理
• 通过为滚动条占位，页面在加载更多内容时不会发生横向位移。
• 浏览器支持广泛，适合用于布局稳定性的优化。
• 视觉表现：用白色或暗色条带代替滚动条区域，从而避免内容的移动。

3. 使用中的缺陷与视觉问题
• 在 CodePen 等 iframe 环境中，会出现“纯白空隙”（白条）的问题。
• 在非 iframe 环境下虽无白条，但元素居中计算仍未考虑滚动条占位。
• 导致视觉上轻微偏移，尤其在内容需要精确居中时效果不佳。

4. 替代方案：基于 Scroll State 的新思路
• 介绍 CSS scroll-state 容器查询用法，通过判断页面是否可滚动来实现自定义布局调整。
• 示例代码展示了如何利用自定义 CSS 变量和 vendor prefix 控制滚动条宽度。
• 该方法灵活但依赖较新的浏览器支持，尚属实验性方案。
• 作者希望未来能有系统级变量（如 env()）能动态获取滚动条宽度，提升可用性。

5. 总结与展望
• scrollbar-gutter: stable; 简单易用，但小缺陷让人犹豫是否应作为默认。
• CSS Scroll State 提供潜在方向，让开发者更精确地应对滚动相关的布局变化。
• 未来网页布局中可能会实现更智能的滚动状态适配机制。

Frontend Masters

The Downsides of scrollbar-gutter: stable; (and one weird trick)

The esteemed Zach (Leatherpants), blogged about the virtues of scrollbar-gutter: stable;, suggesting it might be good in a starter stylesheet. (Hey, I’ve got one of those.) The thing that it solves is content-shifting. If you have a page that, upon first…