scrollbar-width: none仅在Firefox 64+中有效，可视觉隐藏滚动条并保留所有滚动功能，但需配合overflow: auto/scroll及明确高度；Chrome/Safari须用::-webkit-scrollbar{width:0;height:0;background:transparent}实现等效效果。
scrollbar-width: none 能彻底隐藏滚动条，但只在 Firefox 有效
直接写 scrollbar-width: none 就能视觉上移除滚动条，同时保留滚轮、方向键、触摸板拖拽等所有滚动能力——它不是禁用，是“隐身”。但这个属性只被 Firefox 64+ 支持，Chrome、Safari、Edge 完全忽略，写了也白写。
常见错误包括：
- 把它加在
body或html上，但没配overflow: auto或scroll，结果页面根本没滚动行为，自然也谈不上隐藏 - 误以为它能在 Chrome 生效，导致跨浏览器测试时滚动条突然“重现”
- 写成
scrollbar-width: hidden（无效值），正确关键字只有auto、thin、none
必须作用于有明确高度和可滚动内容的容器，例如：
.chat-log {
height: 300px;
overflow-y: auto;
scrollbar-width: none; /* Firefox only */
}::-webkit-scrollbar 设置 width: 0 是 Chrome/Safari 隐藏滚动条最稳的方式
WebKit/Blink 内核（Chrome、Safari、Edge）不认 scrollbar-width，得用伪元素。只写 ::-webkit-scrollbar { display: none } 看似简单，但在某些旧版 Safari 上会导致滚动失效；更稳妥的做法是把宽高设为 0 并清空背景：
立即学习“前端免费学习笔记（深入）”；
-
::-webkit-scrollbar控制整体尺寸，width/height设为0是关键 - 必须同时声明
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，否则部分浏览器会 fallback 显示默认滑块 - 用
background: transparent比opacity: 0更可靠，尤其在 macOS Safari 15 之前版本
示例：
.log-container::-webkit-scrollbar {
width: 0;
height: 0;
}
.log-container::-webkit-scrollbar-track {
background: transparent;
}
.log-container::-webkit-scrollbar-thumb {
background: transparent;
border: none;
}scrollbar-width: thin 不是统一变细，各浏览器实现不一致
scrollbar-width: thin 在 Firefox 中会让滚动条变窄（通常 6–8px），但它在 Chrome/Safari 中完全无效。更麻烦的是，即使同为 thin，不同系统下表现也不同：
- Windows Chrome 默认滚动条约 17px 宽，
thin对它无影响 - macOS Safari 本就倾向隐藏非活跃滚动条，
thin基本没感知 - Firefox 的
thin是真实缩窄，但具体像素值不暴露，无法精确控制
如果你真需要跨平台统一宽度，别依赖 thin，改用 scrollbar-width: 8px（Firefox 支持长度值，但 Chrome/Safari 仍需回退到 ::-webkit-scrollbar 手动设宽）。
隐藏后不能滚动？90% 是误删或改错了 overflow
最常被忽略的一点：scrollbar-width 和 ::-webkit-scrollbar 只管“皮肤”，不管“开关”。一旦你删掉 overflow: auto 或改成 visible，内容就真的不能滚动了——不是滚动条藏得太好，是根本没开启滚动机制。
- 确保容器有明确
height或max-height -
overflow必须是auto、scroll或带方向的overflow-y: auto等，不能是hidden或visible - 如果用了
overflow-x: hidden; overflow-y: auto，要确认内容确实存在垂直溢出，否则依然不触发滚动
复杂点在于：有些 UI 框架（如 Ant Design 的 Table）会动态 patch overflow，你在 CSS 里写的 scrollbar-width 可能被 JS 后续覆盖，得检查 computed styles 确认最终生效值。
