overflow: overlay是非标准且已弃用的CSS值，仅Chromium和Safari曾支持，Firefox从未实现，现代浏览器均已移除；其替代方案是标准属性scrollbar-gutter: stable，可跨浏览器预留滚动条空间、防止布局抖动。

overflow: overlay 确实能让滚动条浮在内容上、不挤占布局空间，但它**只在 Chromium 和 Safari（WebKit/Blink 内核）中有效，Firefox 已明确不支持，且该属性已被标记为非标准、逐步弃用**。直接依赖它做跨浏览器方案，上线后大概率在 Firefox 或旧 Edge 中失效。

为什么 overflow: overlay 在 Firefox 里完全没反应

Firefox 从一开始就没实现 overflow: overlay，遇到这个值会直接 fallback 到 overflow: auto 行为——也就是滚动条照常占位、内容被挤压。这不是 bug，是规范外的实验性行为被有意忽略。所以你在 Firefox 开发者工具里看到该声明被划掉、不生效，是正常现象。

• overlay 从未进入 CSS Overflow Module Level 4 正式草案
• MDN 明确标注为 "Non-standard"，且无 polyfill 可补
• 即使加了 scrollbar-width: none，也只隐藏滚动条，不解决占位问题

替代方案：用 scrollbar-gutter: stable 预留空间

这是目前唯一被所有现代浏览器（Chrome 94+、Firefox 97+、Safari 16.4+）支持的、能真正防止布局抖动的标准方案。它不隐藏滚动条，而是提前“预留”滚动条位置，让容器宽度恒定。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 对有固定宽高的容器，加 scrollbar-gutter: stable both;
• 配合 overflow: auto，滚动条出现时不再缩容
• 比 JS 计算滚动条宽度更可靠，无需监听 resize 或重排
• 示例：

  div {
    width: 300px;
    height: 200px;
    overflow: auto;
    scrollbar-gutter: stable both;
  }

如果必须透明 + 覆盖 + 兼容 Firefox，只能分条件处理

没有银弹。你得接受：Firefox 下滚动条无法真正“覆盖”，只能做到“视觉弱化 + 空间稳定”。关键组合如下：

立即学习“前端免费学习笔记（深入）”；

• Chromium/Safari：用 overflow: overlay + ::-webkit-scrollbar 设透明滑块和轨道
• Firefox：用 overflow: auto + scrollbar-width: thin + scrollbar-color: rgba(0,0,0,0.2) transparent + scrollbar-gutter: stable
• 全局兜底：给容器设 padding-right: 16px（或用 calc(100% - 100vw) 动态抵消），防 IE/老版本失守

最易被忽略的一点：scrollbar-gutter 必须和 overflow 同时存在才生效；单独写它，等于没写。