scrollbar-gutter: stable 必须写在 html 元素上才生效，body 或 div 上无效；需搭配 overflow-y: auto 使用，且应通过 @supports 做渐进增强并兼顾 bootstrap 等库的冲突处理。
scrollbar-gutter 写在 body 或 div 上完全无效
很多人遇到“加了 scrollbar-gutter: stable 但页面还是跳”，第一反应是属性写错了，其实更大概率是写错了位置。该属性**只对根滚动容器生效**，也就是必须作用于 html 元素——写在 body、.main、.modal-content 上统统被浏览器忽略。
常见错误现象：
• .container { scrollbar-gutter: stable; } → 控制台无报错，但布局照跳
• body { scrollbar-gutter: stable; } → 同样没效果，因为 body 不是根滚动容器
实操建议：
• 必须写成：html { scrollbar-gutter: stable; overflow-y: auto; }
• overflow-y: auto 是必要搭档，只写 scrollbar-gutter 不会触发预留逻辑
• 不要和 overflow: hidden 混用，这会让滚动失效，scrollbar-gutter 失去意义
不支持 scrollbar-gutter 的浏览器直接回退到 overflow-y: scroll
Chrome 94+、Firefox 97+、Safari 16.4+ 支持 scrollbar-gutter: stable，但旧版 Edge（≤112）、部分安卓 WebView、以及所有 IE 都不支持。一旦缺失 fallback，这些环境里抖动照常发生。
实操建议：
• 用 @supports 做渐进增强：
code>@supports (scrollbar-gutter: stable) {<br> html { scrollbar-gutter: stable; overflow-y: auto; }<br>}<br>@supports not (scrollbar-gutter: stable) {<br> html { overflow-y: scroll; }<br>}
• 不要用
body { padding-right: 17px } 这类硬编码补位——macOS 滚动条默认隐藏，Windows 主题可能设为 20px，硬写死必翻车• 如果项目必须兼容极老环境且不能接受常驻滚动条，再考虑
calc(100vw - 100%) 动态计算，但优先级低于 overflow-y: scrollBootstrap Modal 打开时仍跳动？它在偷偷覆盖你的 gutter
Bootstrap 5.3+ 默认仍启用 JS 滚动条补偿逻辑（padding-right 注入），哪怕你写了 scrollbar-gutter，它的 JS 也会在 modal-open 时强制加 padding-right，造成双重占位或冲突，反而加剧跳动。
实操建议：
• 在 CSS 中覆盖 Bootstrap 的 padding：body.modal-open { padding-right: 0 !important; }
• 初始化前禁用其滚动条宽度检测：Bootstrap.Modal.Default.scrollbarWidth = 0;
• 确保 html 已设置 scrollbar-gutter: stable both-edges（both-edges 能防 RTL 场景偏移，也更稳）
• 别依赖 body 的 overflow: hidden 锁定滚动——如果空间没提前预留，锁住后内容区宽度突变，fixed 导航栏照样横移
移动端 Safari 和某些 WebView 报告支持却实际不生效
iOS Safari 17.4+ 才真正支持 scrollbar-gutter，但部分安卓 WebView（如 UC、QQ 浏览器内核）会错误返回 CSS.supports('scrollbar-gutter', 'stable') 为 true，实际渲染无预留效果。这时候仅靠特性检测不够可靠。
实操建议：
• 加一层运行时验证：if (CSS.supports('scrollbar-gutter', 'stable') && document.body.scrollHeight > window.innerHeight) { /* 启用 gutter */ }
• 不要省略 document.body.scrollHeight > window.innerHeight 这个判断——没有滚动需求时，gutter 不会触发占位行为
• 在真机调试阶段务必打开 Safari 开发者工具，检查 computed styles 里 scrollbar-gutter 是否出现在 html 的最终样式中，而不是只看源码写了没
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
