隐藏滚动条需分浏览器处理：Chrome/Safari/Edge用三件套::-webkit-scrollbar样式；Firefox用scrollbar-width: none且不可作用于html/body；iOS Safari仅scrollbar-width: none可靠，横向滚动条需JS控制。
局部滚动容器必须设 overflow: auto 或 scroll
隐藏滚动条的前提是它得「存在过」——也就是说，元素内容必须溢出，且 overflow 不能是 visible 或 hidden。overflow: hidden 会直接裁剪内容、禁用滚动，不是隐藏；visible 则压根不触发滚动机制。
常见错误：给一个固定高但没溢出的 div 直接加 ::-webkit-scrollbar { display: none }，结果毫无反应。因为浏览器根本没生成滚动条。
- 确保容器有明确宽高限制（如
height: 200px） - 内部内容真实超出（例如子元素
height: 300px） - 用
overflow-y: auto（垂直）或overflow-x: auto（水平）触发条件性滚动
::-webkit-scrollbar 在 Chrome/Safari/Edge 中要三件套齐上
只写 .box::-webkit-scrollbar { width: 0 } 在 macOS 上经常失效，尤其 Chrome 120+ 和 Safari 17+。真正稳定的做法是同时声明轨道、滑块和滚动条本体。
单独设 display: none 看似简洁，但部分旧版 Safari 不支持该写法；opacity: 0 或 visibility: hidden 完全无效。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.box::-webkit-scrollbar { width: 0; height: 0; }.box::-webkit-scrollbar-track { background: transparent; }.box::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; }
Firefox 必须用 scrollbar-width: none，且不能写在 html 或 body 上
scrollbar-width: none 只对 Firefox 64+ 有效，而且它对根元素（html、body）完全忽略。写上去等于白写。
如果父级有 overflow: hidden，子级即使设了 scrollbar-width: none 也滚不动——滚动行为被祖先截断了。
- 把滚动逻辑包裹进一层
<div class="scroll-area">，样式只作用于该元素 - 确认祖先链中没有
overflow: hidden或clip-path类干扰属性 - 搭配
scrollbar-color: transparent transparent作为降级（虽不如none彻底，但兼容性略好）
iOS Safari 是最大盲区，scrollbar-width: none 是唯一可靠选项
iOS 16+ 对 ::-webkit-scrollbar 的支持极不稳定：有时滑块消失但轨道残留，有时整个伪元素被忽略。真机测试比模拟器更关键。
横向滚动条在 iOS 上几乎无法用 ::-webkit-scrollbar 隐藏，scrollbar-width: none 虽然只控制垂直方向，但它是目前唯一能跨版本生效的方案。
- 不要依赖
width: 0或display: none应对 iOS - 若必须隐藏横向滚动条，优先考虑 JS 控制内容宽度（如
max-width: 100vw+overflow-x: hidden），而非强求视觉隐藏 - 移动端慎用
transform或will-change，它们可能破坏滚动层叠上下文，让滚动条渲染错乱
