要实现“看不见但能滚”，需分浏览器处理：Firefox需scrollbar-width:none配合height/max-height和overflow:auto；Chrome/Safari/Edge需完整声明::-webkit-scrollbar三伪元素；iOS Safari需降级为padding-right+touch-action；所有方案均依赖容器有明确高度约束。
直接写 overflow: hidden 会禁用滚动，不是隐藏滚动条——你要的是“看不见但能滚”，必须分浏览器处理，且每个浏览器都有硬性前提。
Firefox 下 scrollbar-width: none 不生效的常见原因
这个属性只在 Firefox 64+ 生效，且有三个刚性条件缺一不可：
-
scrollbar-width: none必须写在有明确height或max-height的容器上，不能写在html或body根元素上（写了也忽略） - 该容器必须有
overflow: auto或overflow: scroll，overflow: visible会导致该声明被浏览器直接丢弃 - 如果父级用了
transform或will-change，可能触发层叠上下文，导致 Firefox 渲染异常；此时加一句overflow: scroll强制重绘更稳
Chrome/Safari/Edge 中 ::-webkit-scrollbar 设为 0 却仍显示滚动条
单独写 ::-webkit-scrollbar { width: 0 } 在 macOS 上或新版 Safari 中大概率失效，因为 WebKit 要求轨道和滑块也明确声明：
- 必须同时定义
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb三个伪元素 - 推荐写法是全部设
background: transparent或display: none，而不是只动width - 不要把
::-webkit-scrollbar写在:hover或媒体查询里——旧版 Safari 不支持动态切换
移动端 iOS Safari 的兼容陷阱
iOS 16+ 对 ::-webkit-scrollbar 支持极不稳定，尤其在 position: fixed 容器或 transform 父级下容易回退到默认滚动条：
立即学习“前端免费学习笔记（深入）”；
- 唯一可靠方案是改用
scrollbar-width: none（仅对垂直滚动条有效） - 但注意：iOS Safari 不支持
scrollbar-width，所以实际只能靠降级策略——用overflow: scroll+padding-right: 15px模拟“无滚动条”视觉，再配合touch-action: pan-y保证手势滚动不卡顿 - 若内容需水平滚动，
scrollbar-width: none无效，只能接受 WebKit 伪元素 +width: 0并做好 fallback 测试
最易被忽略的一点：所有方案都依赖容器有明确高度约束。没有 height、max-height 或 flex 布局下的 flex: 1，overflow: auto 就不会触发滚动行为，后续隐藏也就无从谈起。
