overflow: overlay 已废弃，scrollbar-gutter 是目前唯一能预留滚动条空间却不显示它的标准方案，需配合 overflow: auto 和隐藏滚动条样式使用。
Chrome/Firefox 中 overflow: overlay 已被废弃
现在没有标准 CSS 属性能让滚动条“浮在内容上且不占空间”。overflow: overlay 曾在旧版 WebKit（如 Safari 6–10）和早期 Chrome 中支持，但 Chrome 从 64 版起移除，Firefox 从未实现。强行写上不会生效，也不触发任何回退行为。
scrollbar-gutter 是唯一能“预留但不渲染”的现代方案
如果你的真实目标是：内容宽度稳定（不因滚动条出现/消失而跳动），同时又不想滚动条侵占内容区域，scrollbar-gutter 是目前最接近的解法。它强制在容器右侧留出滚动条所需空间，但只留空隙、不显示滚动条本身——前提是配合 overflow: auto 和隐藏滚动条的样式。
实操要点：
- 必须设
overflow: auto或scroll，否则scrollbar-gutter不生效 -
scrollbar-gutter: stable both-edges会为左右两侧都留空（少见），通常用stable即可 - 要真正“看不见”滚动条，还需加隐藏规则：
::-webkit-scrollbar { display: none; }（Chrome/Safari）和scrollbar-width: none;（Firefox） - 注意兼容性：
scrollbar-gutter在 Chrome 94+、Firefox 97+、Safari 16.4+ 支持；旧版本会降级为默认行为（滚动条压内容或挤内容）
隐藏滚动条后内容仍可滚动，但需验证交互是否正常
仅靠 CSS 隐藏滚动条不等于禁用滚动。只要 overflow 值是 auto 或 scroll，鼠标滚轮、触控板、键盘 ↑↓、空格键依然有效。但容易踩的坑有：
- 移动端 Safari 隐藏
::-webkit-scrollbar后，部分 iOS 版本（如 iOS 15.4）会出现无法拖拽滚动的问题，需加-webkit-overflow-scrolling: touch; - 如果父容器有
pointer-events: none或遮罩层覆盖，滚动事件可能被拦截，建议用document.elementFromPoint()快速检查事件路径 - 无障碍访问（如屏幕阅读器）依赖可见滚动条暗示可滚动区域，纯隐藏可能降低可访问性；若需兼顾，可用
aria-hidden="true"配合视觉隐藏而非彻底移除
不要用 padding-right 模拟 scrollbar-gutter
有人用 JS 测滚动条宽度再给容器加 padding-right，看似可行，但问题明显：
- 滚动条宽度不是固定值：Windows 默认 17px，macOS 隐式滚动条为 0，高 DPI 屏幕可能不同
- 页面缩放、字体设置、甚至暗黑模式切换都可能影响实际宽度，JS 读取易滞后或不准
- Flex/Grid 布局中，
padding会破坏对齐逻辑，尤其当子项用flex: 1时更难控制 -
scrollbar-gutter是浏览器原生计算，自动适配所有边界条件，优先级远高于手写补丁
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
