scrollbar-gutter: stable必须作用于html元素才生效，搭配overflow-y: auto触发预留空间，写在body或div上无效；不支持时应降级为html { overflow-y: scroll }。
html上必须写scrollbar-gutter: stable
写了scrollbar-gutter: stable却没效果？八成是设错了位置。这个属性只对html元素生效，设在body、.container或任何其他标签上都无效。
常见错误：
-
body { scrollbar-gutter: stable }→ 完全不触发预留逻辑 - 只写
scrollbar-gutter: stable，但没配overflow-y: auto→ 浏览器不认为这是滚动容器，空间不预留
正确写法只有一种：
html {
scrollbar-gutter: stable;
overflow-y: auto;
}
stable已隐含单侧预留，不需要加both-edges（除非做 RTL 双向布局）；也别和overflow: hidden混用——这会禁用滚动，scrollbar-gutter直接失效。
旧浏览器必须 fallback 到 overflow-y: scroll
Chrome 94+、Firefox 97+、Safari 16.4+ 原生支持scrollbar-gutter，但企业内网或定制 Chromium 仍可能跑着老 Edge 或 Safari 15.x。这时候靠@supports做渐进增强最稳：
html {
overflow-y: scroll; /* 所有浏览器兜底 */
}
<p>@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}</p>
注意：IE 不支持@supports，但它会忽略整个块，直接走第一行，反而更安全。
别用document.body.style.overflow = 'hidden'临时锁滚——fixed 弹窗一开，body 滚动条消失，宽度突增，抖动就来了。
fixed 元素开关时 body 宽度跳变怎么办
抖动不是position: fixed本身的问题，而是它常伴随overflow: hidden操作，导致 body 滚动条突然消失，可用宽度瞬间增加约 17px，所有非 fixed 元素集体左移。
解决方案不是隐藏滚动条，而是补位：
- 用
padding-right: calc(100vw - 100%)让 body 自动填满滚动条宽度（Chrome/Firefox/Edge 100+ 支持） - 老 Safari（calc，得用 JS 测一次写死：
document.body.style.paddingRight = '17px' - 绝对别用
margin-right替代——它不参与box-sizing计算，撑不开容器宽度
这个技巧要写在 body 上，且必须配合overflow: hidden一起用，否则 padding 白加。
横向溢出导致的抖动怎么一眼定位
内容加载过程中突然出现横向滚动条，说明有元素宽度超出了视口——这不是抖动“原因”，而是抖动“证据”。开发期用滚动条当报警器：
/* 诊断期强制竖滚 + 预留空间 */
html {
overflow-y: scroll;
scrollbar-gutter: stable;
}
<p>/<em> 一旦横向溢出立刻暴露 </em>/
body {
overflow-x: auto;
}</p>
这样，只要某处width写死、flex-shrink: 0没设、或white-space: nowrap漏掉，横滚马上弹出来，不用猜谁撑破了布局。
真正难的不是写对某一行 CSS，而是在 JS 控制、hover、keyframes 三类场景中，始终确保滚动条空间被锁定，且每个position: absolute都有position: relative父容器兜底——这两点漏一个，抖动就藏不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
