html { scrollbar-gutter: stable; overflow-y: auto } 是解决布局偏移的标准解法，必须作用于 html 元素并配对 overflow-y 才生效；stable 适用于单栏页面，both-edges 更适配严格居中或 RTL 场景；不支持时降级为 html { overflow-y: scroll }。
直接用 html { scrollbar-gutter: stable; overflow-y: auto } 就能解决大部分居中偏移问题，但必须写在 html 元素上，且要配对 overflow-y 才生效。
scrollbar-gutter 必须写在 html 上才起作用
浏览器只认根滚动容器（即 html）上的 scrollbar-gutter 声明。写在 body、.container 或任何 div 上都会被忽略。
-
body { scrollbar-gutter: stable }→ 完全无效 -
html { scrollbar-gutter: stable }但没设overflow-y→ 不预留空间，无变化 -
html { scrollbar-gutter: stable; overflow-y: auto }→ 正确组合，右侧预留滚动条宽度
stable 和 both-edges 怎么选
选哪个取决于你是否要求内容“视觉上严格居中”。stable 只在右侧预留空间；both-edges 左右各留一份，不是为了显示两个滚动条，而是抵消 margin: 0 auto 下因单侧预留导致的轻微不对称。
- 单栏博客、表单页 →
scrollbar-gutter: stable足够 - 带固定侧边栏的后台系统、RTL 切换频繁的页面 → 用
both-edges - 设计稿明确要求“内容永远居中”，哪怕当前只有右滚动条 → 直接选
both-edges -
both-edges在margin: 0 auto容器里比stable更稳，能避免左右视觉偏移
旧浏览器 fallback 方案
Chrome 94+、Firefox 97+、Safari 16.4+ 支持 scrollbar-gutter；Safari ≤16.3、Edge ≤108 等会直接忽略该声明，退回到原始抖动行为。
立即学习“前端免费学习笔记（深入）”；
- 降级方案：
html { overflow-y: scroll }—— 强制始终显示滚动条，避免宽度跳变，但牺牲“无滚动时不显条”的体验 - 不要混用
overflow: hidden或overflow-y: visible，它们会让scrollbar-gutter失效 - 不支持时，
scrollbar-gutter声明会被浏览器静默丢弃，无需 JavaScript 检测或 polyfill
为什么 transform: translateZ(0) 不是正解
有人用 transform: translateZ(0) 解决滚动时元素“悬浮错位”，那是 GPU 层合成异常问题，和滚动条导致的布局偏移（CLS）无关。它不能阻止 body 宽度重算，也不影响 margin: 0 auto 的计算逻辑。
- 该 hack 针对的是渲染层错位（如 fixed 元素飘移），不是布局层抖动
- 加了它，
html宽度仍会在滚动条出现/消失时突变，居中元素照样晃 - 滥用
translateZ(0)可能增加内存占用，且现代浏览器已极少需要此 hack
真正容易被忽略的是：scrollbar-gutter 是个“策略”而非“样式”，它本身不改变任何尺寸——只有配合 overflow-y 才触发预留行为；而这个行为只在 html 元素上有效，其他地方写了等于没写。
