应使用 overflow-y: scroll 配合 scrollbar-gutter: stable both，再为 Firefox 添加 padding-right: 17px 或 @supports 降级；scrollbar-gutter 单独无效，overscroll-behavior 与布局跳动无关。
scrollbar-gutter 不是防止布局跳动的正确工具——它本身不控制滚动条显隐，也不解决因滚动条出现/消失导致的宽度突变问题。真正该用的是 overflow-y: scroll 配合 scrollbar-gutter: stable 的组合，且必须理解两者的分工。
scrollbar-gutter: stable 为什么不能单独用
scrollbar-gutter: stable 只负责在容器内「预留滚动条空间」，但它不会强制显示滚动条；如果容器内容没溢出，滚动条仍不出现，此时 gutter 空间也不存在（除非同时设了 overflow-y: scroll）。常见错误是只加 scrollbar-gutter: stable 却忘了让容器始终可滚动，结果页面在长/短内容间切换时依然跳动。
-
scrollbar-gutter: stable必须配合overflow-y: scroll或overflow-y: auto才生效（auto在无溢出时不预留 gutter） - 仅在块级容器上有效，对
display: inline或未设置明确高度的元素无效 - Firefox 目前不支持
scrollbar-gutter（截至 2026 年 9 月），需降级 fallback
稳定滚动条空间的最小可靠写法
要让垂直滚动条空间始终存在、避免布局抖动，最简且兼容性可控的做法是：
- 给容器设
overflow-y: scroll—— 强制滚动条常驻（即使内容不够长） - 再加
scrollbar-gutter: stable both—— 明确告诉浏览器：预留 gutter，且左右都留（both比stable更稳妥，防某些浏览器解析歧义） - 为防 Firefox 失效，补一句
padding-right: 17px（滚动条平均宽度）作为兜底，或用 @supports 检测
示例：
立即学习“前端免费学习笔记（深入）”；
body {
overflow-y: scroll;
scrollbar-gutter: stable both;
}
@supports not (scrollbar-gutter: stable) {
body {
padding-right: 17px;
}
}
与 overscroll-behavior 的混淆点
有人误把 overscroll-behavior-y 当作防跳动方案，但它管的是「滚动到边界时是否触发父级滚动或弹跳效果」，和布局宽度变化完全无关。比如模态框里列表滚动到底部后继续拖拽，overscroll-behavior-y: contain 能阻止背景页跟着动，但不会让模态框自身宽度稳定下来。
-
overscroll-behavior-y解决「滚动穿透」，不是「视觉跳动」 -
scrollbar-gutter解决「宽度突变」，但依赖overflow状态 - 两者用途正交，混用无益，选错就白加
真正容易被忽略的是：gutter 预留空间的宽度由浏览器决定，且不同系统（macOS 隐藏式 vs Windows 常驻式）差异大；scrollbar-gutter: stable 只保证“有空间”，不保证“空间固定”，所以对像素级对齐要求高的布局，仍建议统一用 overflow-y: scroll + 固定 padding-right 控制。
