scrollbar-gutter: stable必须写在html上，因浏览器规范限定其仅对根滚动容器（即html元素）生效；设在body、div等任意非根元素上均无效，且需搭配overflow-y: auto或scroll才触发预留空间逻辑。
scrollbar-gutter: stable为什么必须写在html上
它只对根滚动容器生效，也就是html元素。写在body、.container或任何div上都完全无效——浏览器规范明确限定作用域，不是兼容性问题，是根本没被解析。
常见错误现象：.main { scrollbar-gutter: stable } → 页面照常抖动，控制台也无报错，纯属白写。
实操建议：
- 直接写
html { scrollbar-gutter: stable; overflow-y: auto; } - 别套class或ID选择器，避免层叠干扰
- 检查是否被CSS重置库（如Normalize.css）覆盖，加
!important仅用于调试，上线前应清理
overflow-y: auto和scroll的搭配逻辑
scrollbar-gutter: stable不会自己生效，它依赖overflow-y触发预留行为。设了stable但没配overflow-y: auto或scroll，等于预留指令被忽略。
使用场景：大多数内容页需要按需显示滚动条，但又不能抖——这时auto是正解；后台系统或表单页若允许滚动条常驻，scroll更稳。
参数差异：
-
overflow-y: auto+scrollbar-gutter: stable→ 滚动条按需出现，空间始终预留 -
overflow-y: scroll→ 滚动条永远可见，无需scrollbar-gutter也能稳住宽度 -
overflow-y: hidden→ 直接禁用滚动，scrollbar-gutter失效
@supports做降级时容易漏掉的关键点
Chrome 94+、Firefox 97+、Safari 16.4+ 支持scrollbar-gutter，但旧版 Safari（16.3–）或某些 Android WebView 会跳过该规则。只靠@supports不写 fallback，抖动就回来了。
实操建议：
- 降级必须落在
html上，写@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } - 别把
overflow-y: scroll塞进body，部分重置样式会覆盖它 - 慎用
body { width: 100vw; overflow: hidden; }这类补位方案——它可能破坏固定定位元素的计算
为什么calc(100% - 17px)是危险操作
滚动条宽度不是常量：Windows 默认 17px，macOS 隐藏时 0px、悬停后约 15px，高对比度模式下可能达 24px，Linux 发行版差异更大。硬编码17px在任意一台非开发机上都可能翻车。
真正鲁棒的动态补位是body { padding-right: calc(100vw - 100%); }，它直接读取视口与文档宽度差值，天然适配所有系统与缩放状态。
但注意：这个calc只应在降级 fallback 场景下配合html { overflow-y: scroll }使用，不能替代scrollbar-gutter——前者是兜底，后者才是现代解法。
复杂点在于，哪怕写了scrollbar-gutter: stable，如果页面存在字体加载延迟、图片异步渲染或JS动态插入内容，仍可能在首次绘制完成前闪一下。真正的稳定性来自html层的声明式控制，而不是靠后续JS修补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
