scrollbar-gutter: stable 是唯一从渲染管线底层解决滚动条占位跳动的标准方案，需搭配 overflow: auto/scroll 使用，仅 chromium 120+ 原生支持，旧浏览器须用 @supports 降级 fallback。
直接结论：scrollbar-gutter: stable 是目前唯一从渲染管线底层解决滚动条占位跳动的标准方案，但必须搭配 overflow: auto 或 scroll 使用，且仅 Chromium 120+ 原生支持；老浏览器必须降级 fallback。
scrollbar-gutter: stable 必须和 overflow 一起用
单独写 scrollbar-gutter: stable 不生效——它不是独立样式，而是 overflow 渲染流程的“前置占位指令”。浏览器只在计算 overflow 行为时才读取该属性。
- ✅ 正确写法：
html { overflow-y: auto; scrollbar-gutter: stable; }或div.container { overflow: auto; scrollbar-gutter: stable; } - ❌ 错误写法：
div { scrollbar-gutter: stable; }（无 overflow，被忽略） - ⚠️ 注意：
scrollbar-gutter仅对根元素（html）或设置了overflow的块级容器有效；设在body上常因继承/层叠失效，优先选html
为什么不能只靠 overflow-y: scroll
强制常驻滚动条确实能稳住宽度，但它让滚动条永远可见，破坏现代 UI 的视觉一致性（尤其 macOS 隐藏式滚动条用户）。更关键的是，在 fixed 定位或 iframe 场景下，overflow-y: scroll 可能触发双滚动条或意外截断内容。
- 常见错误现象：
body { overflow-y: scroll }没效果 → 实际是html的 overflow 被父级限制，应改写为html { overflow-y: scroll } - 使用场景：后台系统、表单页等对视觉容忍度高、需绝对稳定的场景
- 兼容性：全浏览器支持，但属于“有伤疤的解法”；
scrollbar-gutter是它的优雅替代，而非补充
@supports 降级必须手动补 padding
Chromium 120+ 支持 scrollbar-gutter，Firefox 和 Safari 当前不支持。仅靠 @supports (scrollbar-gutter: stable) 包裹新写法，旧浏览器会完全忽略，导致跳动重现。
- ✅ 推荐降级组合：
@supports (scrollbar-gutter: stable) { html { scrollbar-gutter: stable; overflow-y: auto; } } @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } body { width: 100vw; overflow: hidden; } } - ⚠️ 别信
calc(100% + 17px)：滚动条宽度随系统设置浮动（Windows 一般 17px，macOS 隐藏时 0px，悬停后突变为 ~15px），硬编码必翻车 - 性能提示：所有 JS 动态测
clientWidth - scrollWidth补偿的方案，都会触发强制同步布局，卡顿且不可靠
scrollbar-gutter 不等于隐藏滚动条
它只是预留空间，滚动条仍按需显示。想彻底隐藏滚动条又保留滚动功能？那是另一回事，且会牺牲可访问性。
-
scrollbar-width: none（Firefox）或::-webkit-scrollbar { display: none }（WebKit）只影响视觉，不解决占位问题 - 用伪元素画“假滚动条”危险：不响应拖拽、遮挡真实内容、破坏屏幕阅读器逻辑
- 真正需要“无感滚动”的场景（如轮播图、横向滑动卡片），应改用
transform: translateX()+touch-action: pan-y，绕过原生滚动机制
最易被忽略的一点：scrollbar-gutter 的稳定作用只发生在“计算阶段”，一旦页面缩放、字体加载完成、或动态插入大量文本导致行高变化，仍可能触发重排——所以它必须和 box-sizing: border-box、min-width: 0（防 flex shrink）等基础防护配合使用，不能当成银弹单独依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
