局部滚动容器隐藏滚动条但保留滚动能力，须用overflow-y: auto配合浏览器特异性样式：WebKit用::-webkit-scrollbar全声明设透明，Firefox用scrollbar-width: none（非根元素），iOS需overflow-y: scroll+scrollbar-width并确保容器有明确高度。
局部滚动容器（比如 div）要隐藏滚动条但保留滚动能力，不能直接写 overflow: hidden——那会彻底禁用滚动，内容被裁掉。核心是分浏览器控制视觉层，同时确保滚动上下文有效。
为什么 overflow: hidden 不行
它不是“隐藏滚动条”，而是“禁止滚动+裁剪溢出”。用户无法滚轮、无法触摸拖拽、键盘方向键也失效。常见现象包括：内容只显示顶部一截、动态加载后突然卡死、iOS Safari 上完全无响应。
-
overflow: hidden会切断滚动链，scrollIntoView和scrollTop失效 - 若容器内有
input或textarea，部分安卓 WebView 仍会强制唤出原生滚动条 - 在 flex 布局中，父容器没设
display: flex或子项没加flex-shrink: 0，高度计算错误导致滚动失效
::-webkit-scrollbar 在 Chrome/Safari/Edge 中为何有时不生效
单独写 .container::-webkit-scrollbar { width: 0; } 很可能白写。WebKit 内核要求必须显式定义轨道和滑块，否则回退到默认样式。
- 必须同时声明
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb三个伪元素 - 推荐最小可靠写法：
.container { overflow-y: auto; } .container::-webkit-scrollbar { width: 0; height: 0; } .container::-webkit-scrollbar-track { background: transparent; } .container::-webkit-scrollbar-thumb { background: transparent; } - 如果容器有
transform或will-change，可能触发新层叠上下文，导致滚动条渲染异常；此时加overflow-y: scroll强制重绘更稳
Firefox 下 scrollbar-width: none 为什么没反应
这个属性只对 Firefox 64+ 生效，且有硬性前提：不能作用于 html 或 body 根元素，必须写在实际可滚动的容器上。
立即学习“前端免费学习笔记（深入）”；
- 写在
html或body上无效 → 改用包裹一层<div class="scroll-container"> - 祖先链中任意父级设了
overflow: hidden，会截断子级滚动行为 → 逐级检查overflow值 - 必须配合
overflow: auto或scroll，overflow: visible下该属性被忽略 - 兜底写法：
.scroll-container { overflow-y: auto; scrollbar-width: none; scrollbar-color: transparent transparent; }
iOS Safari 滚动条隐藏失败的真正原因
iOS 15+ 对 ::-webkit-scrollbar 的触发条件变严格：只有当容器明确设了 overflow-y: scroll（不是 auto）且内容真实溢出时，伪元素才生效。很多页面用 auto 依赖自动判断，结果滚动条始终可见。
- 强制写
overflow-y: scroll，哪怕内容暂时不溢出 -
scrollbar-width: none是 iOS Safari 唯一稳定选项，但它只影响垂直滚动条 - 动态加载内容后，iOS 容易闪现原生滚动条 → 初始状态设
height: 0; overflow: hidden，等getBoundingClientRect()测高完成再过渡到目标高度 - 真机测试不可跳过；模拟器和桌面 Safari 表现差异极大
最易被忽略的一点：所有隐藏滚动条的 CSS 都依赖「容器有明确高度」。没有 height 或 max-height，浏览器无法判断是否溢出，overflow 会退化为 visible，伪元素根本不会触发。移动端尤其要注意父容器是否被 flex 压缩或受 viewport 变化影响。
