scrollbar-width 仅 Firefox 支持，Chrome/Safari/Edge 不识别；需配合 overflow 和可滚动条件才能生效，跨浏览器需组合 scrollbar-width、::-webkit-scrollbar 和 -ms-overflow-style。
scrollbar-width 只在 Firefox 有效，其他浏览器不支持
scrollbar-width 是 Mozilla 专有属性，仅被 Firefox（64+）识别。Chrome、Safari、Edge 完全忽略它，即使写成 scrollbar-width: none 也不会生效。这不是兼容性问题，而是标准未采纳——CSS Scrollbars 模块（scrollbar-width 和 scrollbar-color）目前仍是 Working Draft，仅 Firefox 实现了前者。
Firefox 中隐藏滚动条的正确写法
在 Firefox 里用 scrollbar-width: none 确实能隐藏原生滚动条，但必须满足两个前提：
- 目标元素需有明确的
overflow设置（如overflow: auto或overflow: scroll），仅靠内容溢出不会触发 - 该元素必须可滚动（即内部内容高度/宽度超过容器），否则
scrollbar-width无实际作用
示例：
.container {
height: 200px;
overflow: auto;
scrollbar-width: none; /* Firefox 隐藏滚动条 */
}注意：这仅移除滚动条视觉，滚动功能仍存在（可用鼠标滚轮、键盘方向键或 scrollTop 操作）。
立即学习“前端免费学习笔记（深入）”；
跨浏览器隐藏滚动条的通用方案
要真正“隐藏滚动条且保持滚动”，得组合多种技术：
- Firefox：用
scrollbar-width: none - WebKit 内核（Chrome/Safari）：用
::-webkit-scrollbar { display: none } - IE/Edge Legacy：用
-ms-overflow-style: none - 为防布局抖动，建议同时加
padding-right: 0或用overflow: overlay（仅旧版 WebKit 支持）
完整 CSS 片段：
.scrollable {
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge Legacy */
}
.scrollable::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}隐藏滚动条后内容不可滚动？检查 overflow 和尺寸
常见错误是写了 scrollbar-width: none 却发现内容不能滚动了。大概率是：
-
overflow值为visible或未设置（默认值），导致内容溢出但不产生滚动机制 - 容器高度由内容撑开（
height: auto），没有固定约束，自然无需滚动 - 父级设置了
overflow: hidden，截断了子元素的滚动区域
验证方法：临时加上 border: 1px solid red 和 height: 200px，确认容器尺寸和溢出行为是否符合预期。
滚动条是否可见，最终取决于浏览器引擎实现和 CSS 层叠顺序；scrollbar-width 只是 Firefox 的一个开关，不是跨浏览器解决方案的一部分。
