必须写 html { scrollbar-gutter: stable; overflow-y: auto; }，该属性仅对根元素html生效，body或div上无效；需搭配overflow-y: auto触发预留逻辑，@supports回退至overflow-y: scroll确保兼容性。
必须写 html { scrollbar-gutter: stable; overflow-y: auto; }，其他位置或组合基本无效。
scrollbar-gutter 只对 html 元素生效
该属性被 CSS 规范明确限定为仅作用于根滚动容器，也就是 html 元素。写在 body、.main 或任意 div 上都会被浏览器静默忽略，控制台不报错，但布局照跳。
常见错误包括：
-
.container { scrollbar-gutter: stable; }→ 完全无反应 -
body { scrollbar-gutter: stable; overflow-y: auto; }→ 依然无效，因为body不是根滚动上下文
根源在于：只有 html 控制整个视口的滚动行为和盒模型边界计算。内容区宽度抖动，本质是根容器可用宽度突变，干预点只能在这里。
overflow-y: auto 是必要搭档，不是可选
scrollbar-gutter: stable 本身不触发预留逻辑，它依赖 overflow 行为来决定是否启用“槽（gutter）”机制：
- 只写
html { scrollbar-gutter: stable; }→ 无效果，浏览器不计算预留空间 -
overflow-y: visible或hidden→scrollbar-gutter不激活 -
overflow-y: scroll→ 已强制占位，scrollbar-gutter变成冗余，且在旧版 Safari 中可能冲突 - 正确组合：
overflow-y: auto+scrollbar-gutter: stable→ 滚动条按需出现，但槽空间始终存在
这个组合让内容区宽度恒定，滚动条只是“落进”已预留的槽里，不挤 content，也不改 layout width。
@supports 回退到 overflow-y: scroll 才真正兜底
Chrome 94+、Firefox 97+、Safari 16.4+ 支持 scrollbar-gutter，但旧版 Edge（≤112）、部分安卓 WebView、微信内置浏览器仍不支持。靠 JS 检测或硬编码 padding-right 都不可靠：
-
body { padding-right: 17px; }→ macOS 滚动条默认隐藏时宽度为 0，Windows 主题可能为 12–20px，必翻车 -
calc(100vw - 100%)虽能动态算出真实滚动条宽，但需确保html没被其他样式劫持，且在字体加载、JS 插入内容等时机易产生瞬时闪烁
最稳方案是 CSS 层叠回退：
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
html { overflow-y: auto; scrollbar-gutter: stable; }
}
这样旧浏览器走第一行（常驻滚动条），新浏览器覆盖为按需 + 预留，零 JS、零运行时开销。
Bootstrap Modal 打开时仍跳动？它在偷偷覆盖你的 gutter
Bootstrap 5.3+ 默认仍启用 JS 滚动条补偿逻辑（padding-right 注入），哪怕你写了 scrollbar-gutter，它的 JS 也会在 modal-open 时强制加 padding-right，造成双重占位或冲突，反而加剧跳动。
实操建议：
- 在 CSS 中覆盖 Bootstrap 的 padding：
body.modal-open { padding-right: 0 !important; } - 初始化前禁用其滚动条宽度检测：
Bootstrap.Modal.Default.scrollbarWidth = 0; - 确保
html已设置scrollbar-gutter: stable，且未被其他库重置
容易被忽略的是：很多项目把 scrollbar-gutter 当成“一劳永逸”的开关，却没意识到 UI 库的 JS 行为可能绕过它——真正稳定需要 CSS 和 JS 两层对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
