要让scrollbar-gutter真正生效，必须写在html元素上，并且通常需要配合overflow-y: auto使用；写在body或普通div上都不会起作用。对于不支持该属性的旧浏览器，建议通过@supports做兼容处理，降级为html { overflow-y: scroll }，以减少页面抖动并提升布局稳定性。
scrollbar-gutter必须写在html上才会生效
如果你已经写了scrollbar-gutter: stable，却依然无法防止页面抖动，最常见的原因就是把它加在了body、.container或其他任意div上。这个 CSS 属性只对根滚动容器，也就是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; }
}这种写法的优势在于：
- 旧浏览器会直接采用第一行规则，先保证布局稳定，虽然滚动条会始终显示
- 新浏览器则会覆盖为按需显示滚动条，并预留空间，视觉效果和交互体验更自然
- 不需要借助 JavaScript 检测，运行时零额外开销，更适合生产环境
不要用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 }，它的脚本仍可能继续强制增加 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内部，整套 CSS 兼容方案就会失效。
