overflow: hidden是错的，因为它彻底禁用滚动上下文，导致内容裁剪、scrolltop失效、scrollintoview()静默失败、键盘与屏幕阅读器无法访问，且移动端可能触发弹性回弹暴露原生滚动条；正确做法是用overflow: auto/scroll配合浏览器专属隐藏方案（如scrollbar-width: none或::-webkit-scrollbar{width:0}）来实现视觉隐藏但保留完整滚动功能。
直接用 overflow: hidden 不行——它会砍掉滚动能力，内容被裁剪、scrollTop 失效、键盘和屏幕阅读器无法访问，移动端还可能闪出原生滚动条。
为什么 overflow: hidden 是错的
很多人以为“隐藏滚动条”就是设 overflow: hidden，结果发现内容滚不了、scrollIntoView() 静默失败、iOS Safari 弹性回弹后反而暴露原生条。这不是隐藏，是禁用。真正要的是「视觉不可见，但滚动上下文完整存在」。
-
overflow: hidden会让浏览器彻底放弃生成滚动上下文，后续所有滚动 API 和交互都失效 - 即使加了
height或max-height，只要 overflow 是 hidden，就不可能触发::-webkit-scrollbar或scrollbar-width - 在 flex 布局中，父容器设
overflow: hidden会导致子项overflow: auto被截断，滚动行为被祖先链阻断
::-webkit-scrollbar 在 Chrome/Safari/Edge 中不生效的常见原因
单独写 .container::-webkit-scrollbar { width: 0 } 在 macOS Chrome 或新版 Edge 上大概率被忽略。WebKit 渲染引擎要求三个伪元素同时声明才能稳定覆盖默认样式。
- 必须同时定义：
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb - 哪怕只设
background: transparent或display: none，缺一不可 - 不要把它们写在
@media或:hover里——旧版 Safari 不支持动态切换 - 如果父容器用了
transform或will-change，可能触发层叠上下文导致滚动条渲染异常；此时加overflow: scroll强制重绘更稳
Firefox 下 scrollbar-width: none 没反应怎么办
这个属性只在 Firefox 生效，且有硬性前提：不能作用于 html 或 body 根元素，且目标元素必须有明确的 overflow 值（auto 或 scroll），visible 不行。
- 写在
body上无效 → 改用包裹一层<div class="scroll-container"> <li>祖先链中任意一级有 <code>overflow: hidden，都会让子级的scrollbar-width失效 - 推荐搭配
scrollbar-color: transparent transparent作为 fallback，兼容 Firefox 64 之前版本 - iOS Safari 对
::-webkit-scrollbar支持极差，scrollbar-width: none是唯一可靠选项，但仅对垂直滚动条有效 - 目标容器必须有明确高度约束：
height、max-height，或通过 flex 布局（如父容器设display: flex; flex-direction: column，自身设flex-shrink: 0） - 子元素不能用
position: absolute或fixed脱离文档流，否则“溢出”判断失效，滚动条压根不出现 - 避免给容器设
border或padding后忘记用box-sizing: border-box，否则实际可用高度变小，提前触发滚动 - 全局去掉
body滚动条时，页面会因滚动条占位消失而右移——这是布局抖动，不是滚动条没隐藏成功
贴边滚动条的布局前提和易踩坑点
所谓“贴边”，是指滚动条紧贴容器右侧（或底部）且不占额外空间。这依赖浏览器对溢出区域的精确判定，稍有不慎就会失效。
最麻烦的其实是兼容性断层：Chrome 依赖三段式伪元素，Firefox 只认 scrollbar-width，iOS Safari 两者都靠不住。真正在意体验的项目，得把「能滚」当作底线，「看不见」只是锦上添花——别为了视觉干净牺牲可访问性。
