正确做法是设overflow-y:auto/scroll并配合浏览器专属隐藏：Firefox用scrollbar-width:none，Chrome/Safari/Edge用::-webkit-scrollbar全置透明，IE用-ms-overflow-style:none；overflow:hidden会彻底禁用滚动能力。
overflow: hidden 是错的，别用
它不是“隐藏滚动条”，而是直接砍掉滚动能力：内容被裁剪、scrollTop 失效、scrollIntoView() 静默失败、键盘方向键和屏幕阅读器无法访问溢出区域。页面会失去可访问性，且移动端 Safari 可能触发弹性回弹并意外显示原生滚动条。
真正要的是「视觉隐藏但滚动照常」——必须让浏览器先生成滚动上下文，再把滚动条样式抹掉。
- 目标元素必须设
overflow-y: auto或overflow-y: scroll（仅overflow: visible不生效） - 必须有明确高度约束：
height、max-height或 flex 布局中父容器设flex-shrink: 0 - 子元素不能用
position: absolute或fixed脱离文档流，否则“溢出”判断失效
::-webkit-scrollbar 在 Chrome/Safari/Edge 中为什么 width: 0 不生效
单独写 .container::-webkit-scrollbar { width: 0 } 在 macOS Chrome 或新版 Edge 上经常被忽略。WebKit 要求三个伪元素同时存在才能稳定渲染滚动条样式，哪怕只是设成透明或不可见。
可靠写法是三者都声明：
立即学习“前端免费学习笔记（深入）”；
.container {
overflow-y: auto;
}
.container::-webkit-scrollbar {
width: 0;
height: 0;
}
.container::-webkit-scrollbar-track {
background: transparent;
}
.container::-webkit-scrollbar-thumb {
background: transparent;
}
- 缺
::-webkit-scrollbar-track或::-webkit-scrollbar-thumb，某些版本（尤其是 macOS）会 fallback 到默认滚动条 - 不要写在
:hover或媒体查询里动态控制——旧版 Safari 不支持 - 如果父容器用了
transform或will-change，可能触发层叠上下文导致滚动条渲染异常；此时加overflow: scroll强制重绘更稳
Firefox 下 scrollbar-width: none 为啥没反应
这个属性只在 Firefox 生效，且有硬性前提：元素不能是 html 或 body 根元素，且必须有明确的 overflow 值（如 auto、scroll），不能是 visible。
常见踩坑点：
- 写在
html或body上 → 无效。改用包裹一层<div class="scroll-container"> - 父级设了
overflow: hidden→ 子级滚动行为被截断，scrollbar-width不起作用 - 没配
scrollbar-color: transparent transparent→ 某些旧版 Firefox 会 fallback 显示灰色滑块
推荐组合写法：
.scroll-container {
overflow-y: auto;
scrollbar-width: none;
scrollbar-color: transparent transparent;
}
移动端 Safari 隐藏滚动条最稳妥的方式
iOS Safari 对 ::-webkit-scrollbar 支持极不稳定，即使写了 display: none，某些版本（iOS 16+）仍可能闪现原生滚动条。目前唯一可靠方案是：只用 scrollbar-width: none，但仅限垂直滚动场景，且必须配合 overflow-y: auto 和明确高度。
- 横向滚动（
overflow-x: auto）在 iOS Safari 上无法隐藏滚动条，scrollbar-width不支持水平方向 - 避免在
body上直接操作；用嵌套容器 +max-height更可控 - 测试时务必真机验证——模拟器常表现正常，但实际设备可能回退到原生样式
复杂点在于跨浏览器兼容性不是靠一套规则搞定，而是每种内核都要单独兜底；最容易被忽略的是父容器的层叠上下文和 overflow 继承链，它们比伪元素本身更容易让隐藏失效。
