scrollbar-gutter: stable 必须作用于 html 元素才生效，写在 div、body 等非根元素上无效；需搭配 overflow-y: auto 或 scroll 才触发预留空间，降级时应 fallback 至 overflow-y: scroll。
scrollbar-gutter: stable 必须作用于 html 元素才生效
很多人写了 scrollbar-gutter: stable 却没效果，根本原因是它只对根元素（html）起作用，写在 div、section 或 body 上完全无效。浏览器会直接忽略。
常见错误现象：.container { scrollbar-gutter: stable } → 无任何行为变化；body { scrollbar-gutter: stable; overflow-y: auto } → 依然抖动。
实操建议：
- 必须用
html { scrollbar-gutter: stable; overflow-y: auto } - 不要加
!important，该属性不支持优先级覆盖 - 如果用了 CSS 重置库（如 normalize.css 或 modern-normalize），确认它没重置
html的overflow
stable 和 both-edges 的区别直接影响居中稳定性
scrollbar-gutter: stable 只在右侧预留滚动条空间；而 scrollbar-gutter: both-edges 会在左右两侧各留一份——这对居中布局更友好，尤其当页面有固定宽度容器 + margin: 0 auto 时。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 单栏流式页（如博客正文）→
stable足够 - 带侧边栏/导航栏的管理后台 →
both-edges可避免因 RTL 切换或双滚动条逻辑导致的不对称偏移 - 设计稿要求“内容永远严格居中” → 选
both-edges，哪怕当前只用右滚动条
注意：both-edges 不等于“显示两个滚动条”，只是预留空间策略更保守。
scrollbar-gutter 不是万能的：降级兼容必须手动加 fallback
scrollbar-gutter 在 Safari 16.4+、Chrome 94+、Firefox 97+ 才支持。旧版浏览器（比如 Safari ≤16.3、Edge ≤108）会直接忽略该声明，退回到原始抖动行为。
不能只靠它 standalone 工作。实操建议：
- 始终搭配
html { overflow-y: scroll }作为兜底 —— 强制滚动条常驻，消除宽度突变 - 二者共存不冲突：
html { scrollbar-gutter: stable; overflow-y: scroll }是推荐组合 - 避免用
overflow-y: hidden或auto单独搭配scrollbar-gutter，否则降级时无缓冲
性能上无损耗，但逻辑上这是个“渐进增强”方案：新浏览器用 gutter 隐形占位，老浏览器靠 scroll 显性占位。
为什么 overflow: overlay 不是替代方案
overflow: overlay 确实能让滚动条浮在内容上，不占空间，但它已被 Chrome/Firefox 弃用，Safari 从未支持。MDN 明确标注为“非标准且已废弃”。
常见错误现象：
- 写了
div { overflow: overlay }→ 开发者工具里显示“invalid property value” - 误以为它能跨浏览器工作 → 实际仅在极旧版 Chrome（≤86）短暂可用
真正可替代的只有两条路：scrollbar-gutter（现代）+ overflow-y: scroll（兼容），没有第三条捷径。
容易被忽略的一点：即使你只面向最新 Chrome 用户，也要留意企业内网环境可能锁死旧版 Edge，scrollbar-gutter 的降级 fallback 不是“以防万一”，而是“必然要写”。
