scrollbar-width 仅 Firefox 支持，Chrome/Safari/Edge 不识别；隐藏滚动条需按浏览器分写：Firefox 用 scrollbar-width: none，WebKit 内核用 ::-webkit-scrollbar 宽高设 0 并透明化，且须设容器 max-height 和 -webkit-overflow-scrolling: touch 保障 iOS 可滚动。
scrollbar-width 只在 Firefox 有效，其他浏览器不识别
很多开发者以为 scrollbar-width 是跨浏览器方案，实际上它只是 Firefox 的私有属性（自 64 版本起支持），Chrome、Safari、Edge（基于 Chromium）完全忽略该声明。直接写 scrollbar-width: none 在非 Firefox 环境下毫无效果，且不会报错，容易误判为“已生效”。
实操建议：
- 若目标用户以 Firefox 为主（如内部工具），可放心用
scrollbar-width: none配合overflow: auto - 否则必须搭配其他方案，不能单独依赖它
- 检查时打开 Firefox 开发者工具 → 计算样式，确认该属性是否被应用并生效
移动端 Safari 和 Chrome 需用 -webkit-scrollbar 配合透明化
iOS Safari 和 Android Chrome 使用 WebKit 内核，仅支持 ::-webkit-scrollbar 伪元素隐藏滚动条。但注意：纯 display: none 或 visibility: hidden 对 ::-webkit-scrollbar 无效；必须将宽度/高度设为 0，再配合透明色或背景裁剪。
常见错误现象：写了 ::-webkit-scrollbar { width: 0 } 却仍有细线残留 —— 这是因为未同时设置 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 的 background 为透明或同色。
最小可行示例：
.scrollable {
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 保持 iOS 惯性滚动 */
}
.scrollable::-webkit-scrollbar {
width: 0;
height: 0;
}
.scrollable::-webkit-scrollbar-track,
.scrollable::-webkit-scrollbar-thumb {
background: transparent;
}
隐藏后仍需确保内容可滚动，尤其在 iOS 上
移动端隐藏滚动条后，最常被忽略的问题是：用户找不到滚动入口，或误以为内容不可滚动。iOS Safari 对 overflow: auto 的触发非常保守 —— 如果容器没有明确的 height 或 max-height，即使内容溢出，也不会启用滚动。
使用场景中易踩的坑：
- 用
flex: 1或height: 100%但父容器未设高度 → 滚动失效 - 未加
-webkit-overflow-scrolling: touch→ iOS 上滚动卡顿、无惯性 - 容器内含
position: fixed子元素 → 可能破坏滚动区域计算
推荐做法：给滚动容器设 max-height: 60vh（或其他具体值），并始终测试真机滑动反馈。
真正跨平台的隐藏方案要组合判断
没有单一样式能通吃所有移动端浏览器。可靠做法是「属性检测 + 回退」：先用 @supports (scrollbar-width: none) 给 Firefox，再用 @supports (-webkit-appearance: none) 给 WebKit，最后对不支持任一的环境（如旧版 UC、三星浏览器）做 JS 补充（如监听 touchmove 手动控制 scrollTop）。
性能提示：避免在滚动频繁的区域（如长列表）里用 transform 或 filter 隐藏滚动条，会触发重绘；width: 0 是最轻量的方式。
复杂点在于，部分安卓 WebView（如微信内置）对 ::-webkit-scrollbar 支持不完整 —— 有时需额外加 overflow: scroll 强制渲染滚动机制，哪怕内容并不溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
