scrollbar-gutter必须写在html上才生效，且需配合overflow-y: auto；写在body或div无效，不支持时须用@supports降级为html { overflow-y: scroll }。
scrollbar-gutter必须写在html上才生效
写了scrollbar-gutter: stable却没防住抖动？大概率是加在了body、.container或任意div上。该属性只对根滚动容器（即html元素）起作用，浏览器会直接忽略其他位置的声明。
常见错误现象：
-
body { scrollbar-gutter: stable }→ 完全无反应 -
.main { scrollbar-gutter: stable; overflow-y: auto }→ 预留空间逻辑不触发
实操建议：
- 必须用
html { scrollbar-gutter: stable; overflow-y: auto } - 不要加
!important——该属性不支持优先级覆盖 - 若项目用了
normalize.css等重置库，检查它是否重写了html的overflow，导致overflow-y: auto被覆盖
@supports检测必须配合层叠式fallback
Chrome 94+、Firefox 97+、Safari 16.4+ 支持scrollbar-gutter: stable；旧版 Edge（≤112）、多数安卓 WebView、所有 IE 都不支持。不加 fallback，这些环境里抖动照常发生。
不能只靠@supports写一层，必须利用 CSS 层叠机制做渐进增强：
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
html { overflow-y: auto; scrollbar-gutter: stable; }
}
这样写的好处：
- 旧浏览器直接走第一行，稳住布局（虽然滚动条常显）
- 新浏览器覆盖为按需显示 + 预留空间，视觉与行为都自然
- 无需 JS 检测，零运行时开销
别用padding-right: 17px硬编码降级
macOS 隐藏滚动条时宽度为 0，Windows 主题可能设成 12–20px，Firefox 默认约 16px——写死必翻车。
真要 JS 补位，优先用document.documentElement.clientWidth - document.documentElement.offsetWidth动态测真实滚动条宽度；但更推荐纯 CSS 降级方案：
-
body { padding-right: calc(100vw - 100%); }—— 动态计算滚动条宽度，无需硬编码 - 搭配
html { overflow-y: scroll }和body { width: 100vw; overflow: hidden; }防双滚动条 - 避免
overflow: overlay——已废弃，Chrome/Firefox 均不再响应
第三方库（如 Bootstrap Modal）会破坏gutter效果
Bootstrap 5.3+ 默认启用 JS 滚动条补偿逻辑：Modal 打开时往body注入padding-right，哪怕你已设html { scrollbar-gutter: stable }，它的 JS 也会强行加 padding，造成双重占位或冲突，反而加剧跳动。
实操建议：
- CSS 覆盖 Bootstrap 的 padding：
body.modal-open { padding-right: 0 !important; } - 初始化前禁用其检测：
Bootstrap.Modal.Default.scrollbarWidth = 0; - 确保
html已设置scrollbar-gutter: stable，且没被其他样式层叠覆盖
真正容易被忽略的是：scrollbar-gutter 的降级不是“有无”的二选一，而是“空间预留策略”与“滚动行为控制”的耦合。一旦漏掉overflow-y: auto，或把 fallback 写在@supports块内部，整个链条就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
