必须写在html上才生效：html { scrollbar-gutter: stable; overflow-y: auto; }，写在body或div无效；需@supports检测并fallback至html { overflow-y: scroll; }。
scrollbar-gutter 必须写在 html 上才生效
写了 scrollbar-gutter: stable 却没防住跳动？大概率是写错了位置。该属性只对根滚动容器生效，也就是 html 元素——写在 body、.main 或任何 div 上，浏览器直接忽略，控制台也不会报错。
常见错误现象：
-
.container { scrollbar-gutter: stable; }→ 完全无效 -
body { scrollbar-gutter: stable; }→ 依然跳动，因为不是根容器
实操建议：
- 必须用：
html { scrollbar-gutter: stable; overflow-y: auto; } -
overflow-y: auto是必要搭档，单独设scrollbar-gutter不会触发预留逻辑 - 避免混用
overflow: hidden，这会让滚动失效，scrollbar-gutter失去意义
@supports 检测 + fallback 到 overflow-y: scroll
Chrome 94+、Firefox 97+、Safari 16.4+ 支持 scrollbar-gutter: stable；旧版 Edge（≤112）、多数安卓 WebView、所有 IE 都不支持。不加 fallback，这些环境里抖动照常发生。
实操建议：
- 用 CSS 层叠做渐进增强，不要只靠
@supports写一层：
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
html { overflow-y: auto; scrollbar-gutter: stable; }
}
这样旧浏览器走第一行（常驻滚动条），新浏览器覆盖为按需显示 + 预留空间。
- 别硬写
body { padding-right: 17px }—— macOS 隐藏滚动条时宽度为 0，Windows 主题可能设成 12–20px，写死必翻车 - 真要 JS 补位，优先用
document.documentElement.clientWidth - document.documentElement.offsetWidth动态测真实滚动条宽度
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，且没被其他样式层叠覆盖
stable 和 both-edges 别乱配
scrollbar-gutter: stable 默认只在右侧预留空间，够用；both-edges 是为双向文本（RTL/LTR 混排）设计的，会在左右各留一个滚动条宽度，普通页面用了反而多出约 30px 空白，窄屏下尤其明显。
实操建议：
- 单向排版（绝大多数网站）直接用
stable就行，不用加both-edges - 除非你在做阿拉伯语/希伯来语 + 中文混排，否则
both-edges属于过度配置 - 不要给
body或html直接设both-edges，除非你确认整个页面都需要双边预留（极少见）
真正起效的关键就三件事：写对位置（html）、配对行为（overflow-y: auto）、兜住老环境（@supports + overflow-y: scroll）。其余都是干扰项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
