scrollbar-gutter: stable 能防跳动，因其强制浏览器始终预留滚动条槽空间，使内容区宽度恒定；必须配合 overflow-y: auto 作用于 html 元素才生效，不支持时回退 overflow-y: scroll。
scrollbar-gutter: stable 为什么能防跳动
滚动条出现/消失时内容左右晃，本质是浏览器在“有无滚动条”之间切换了可用宽度。scrollbar-gutter: stable 告诉浏览器：不管当前需不需要滚动，都提前预留出滚动条槽（gutter）空间——这个空间算进盒模型的 padding-box 里，但不挤 content；内容区域宽度从此恒定。
它不是隐藏滚动条，也不是强制显示，而是让“占位”这件事脱离滚动状态，变成布局的一部分。Firefox 111+、Chrome 94+、Safari 16.4+ 均原生支持，无需 JS 补丁。
怎么写才真正生效：关键组合与常见失效点
单独写 scrollbar-gutter: stable 很可能没效果，必须配合 overflow 行为才能触发预留逻辑：
-
overflow-y: auto或overflow-y: scroll是必要前提；只设overflow: visible或hidden时 gutter 不激活 - 推荐用
overflow-y: auto+scrollbar-gutter: stable：滚动条按需出现，但空间始终预留 - 避免同时写
overflow-y: scroll—— 它已强制占位，scrollbar-gutter变成冗余，且在部分旧版 Safari 中可能冲突 - 若容器本身
height不固定（如min-height: 100vh），需确保父级高度可撑开，否则 gutter 空间可能被压缩或忽略
both-edges 什么时候该用，什么时候别乱加
scrollbar-gutter: both-edges 会在左右两侧各留一个滚动条宽度的空间，主要面向双向文本（RTL/LTR 混排）或需要严格居中的场景。普通单向页面用它反而会多出不必要的空白：
- 表格页、仪表盘侧边栏+主内容区对齐时，
both-edges能保证左右 padding 对称，避免因单侧 gutter 导致视觉偏移 - 纯左到右排版的正文容器，用
stable就够了；加both-edges会让内容区域变窄约 30px（双侧各 ~15px），尤其在窄屏下明显 - 不要给
body或html直接设both-edges，除非你确认整个页面都需要双边预留（极少见）
不支持 scrollbar-gutter 的老浏览器怎么兜底
IE 全系、Firefox padding-right: 17px 是最常见错误——滚动条宽度随系统设置浮动（macOS 隐藏时为 0，Windows 可能是 12–20px）：
- 优先用 JS 测量：
document.documentElement.clientWidth - document.documentElement.offsetWidth，结果即真实滚动条宽度，动态设padding-right - 次选方案：强制常驻滚动条 + 视觉隐藏，例如
overflow-y: scroll配合::-webkit-scrollbar { width: 0 }和::-moz-scrollbar { width: 0 } - 完全放弃兼容时，可在
@supports not (scrollbar-gutter: stable)中回退到overflow-y: scroll，接受轻微视觉“胖瘦变化”，但至少避免跳动
真正容易被忽略的是：scrollbar-gutter 不影响滚动行为本身，它只管“空间”。如果你发现加了之后仍跳动，大概率是某个子容器 overflow 设置覆盖了父级，或者用了 transform/position: fixed 等脱离文档流的元素绕过了 gutter 预留。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
