如何让CSS的scrollbar-gutter在旧浏览器优雅降级？

scrollbar-gutter必须写在html上才生效，且需配合overflow-y: auto；写在body或div无效，不支持时须用@supports降级为html { overflow-y: scroll }。

scrollbar-gutter必须写在html上才生效

写了scrollbar-gutter: stable却没防住抖动？大概率是加在了body、.container或任意div上。该属性只对根滚动容器（即html元素）起作用，浏览器会直接忽略其他位置的声明。

常见问题表现：

1. body { scrollbar-gutter: stable } → 完全无反应
2. .main { scrollbar-gutter: stable; overflow-y: auto } → 预留空间逻辑不触发

实操建议：

1. 必须用html { scrollbar-gutter: stable; overflow-y: auto }
2. 不要加!important——该属性不支持优先级覆盖
3. 若项目用了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; }}

这样写的好处：

1. 旧浏览器直接走第一行，稳住布局（虽然滚动条常显）
2. 新浏览器覆盖为按需显示 + 预留空间，视觉与行为都自然
3. 无需 JS 检测，零运行时开销

别用padding-right: 17px硬编码降级

macOS 隐藏滚动条时宽度为 0，Windows 主题可能设成 12–20px，Firefox 默认约 16px——写死必翻车。

真要 JS 补位，优先用document.documentElement.clientWidth - document.documentElement.offsetWidth动态测真实滚动条宽度；但更推荐纯 CSS 降级方案：

1. body { padding-right: calc(100vw - 100%); } —— 动态计算滚动条宽度，无需硬编码
2. 搭配html { overflow-y: scroll }和body { width: 100vw; overflow: hidden; }防双滚动条
3. 避免overflow: overlay——已废弃，Chrome/Firefox 均不再响应

第三方库（如 Bootstrap Modal）会破坏gutter效果

Bootstrap 5.3+ 默认启用 JS 滚动条补偿逻辑：Modal 打开时往body注入padding-right，哪怕你已设html { scrollbar-gutter: stable }，它的 JS 也会强行加 padding，造成双重占位或冲突，反而加剧跳动。

实操建议：

1. CSS 覆盖 Bootstrap 的 padding：body.modal-open { padding-right: 0 !important; }
2. 初始化前禁用其检测：Bootstrap.Modal.Default.scrollbarWidth = 0;
3. 确保html已设置scrollbar-gutter: stable，且没被其他样式层叠覆盖

真正容易被忽略的是：scrollbar-gutter 的降级不是“有无”的二选一，而是“空间预留策略”与“滚动行为控制”的耦合。一旦漏掉overflow-y: auto，或把 fallback 写在@supports块内部，整个链条就断了。