直接用 overflow: auto 或 scroll 启用滚动，再配合浏览器专属隐藏手段（如 ::-webkit-scrollbar { display: none }、scrollbar-width: none），可隐藏滚动条但保留完整滚动功能；overflow: hidden 会彻底禁用滚动上下文，导致 scrollTop 失效、scrollIntoView 静默失败、键盘与屏幕阅读器无法访问溢出内容，且不生成滚动条。
直接用 overflow: auto 或 overflow: scroll 启用滚动，再配合浏览器专属隐藏手段，滚动功能完全不受影响；overflow: hidden 是错的——它会砍掉滚动能力，不是“隐藏”。
为什么 overflow: hidden 不能用
这个值会让容器彻底放弃滚动上下文：内容被裁剪、scrollTop 失效、scrollIntoView() 静默失败、键盘方向键和屏幕阅读器都无法访问溢出区域。
- 它不隐藏滚动条，而是让滚动条根本不会生成
- 移动端 Safari 可能因此触发“弹性回弹”并意外显示原生滚动条
- 无障碍（a11y）检测工具会报
focusable content is not reachable
::-webkit-scrollbar { display: none } 在 Chrome/Safari/Edge 中怎么写才生效
这是 WebKit/Blink 内核唯一可靠的方案，但必须满足三个条件才能渲染伪元素：
- 目标元素要有明确的
height或max-height - 必须设置
overflow-y: auto或overflow-y: scroll（仅overflow: visible不行） - 伪元素必须写在
<style>标签或外部 CSS 文件中，不能用内联
旧版 Safari（iOS 15 及更早）不支持 display: none，可降级为：
立即学习“前端免费学习笔记（深入）”；
.scroll-container::-webkit-scrollbar {
width: 0;
height: 0;
}
.scroll-container::-webkit-scrollbar-track,
.scroll-container::-webkit-scrollbar-thumb {
background: transparent;
}
scrollbar-width: none 在 Firefox 中为何有时没反应
这个属性只在 Firefox 64+ 生效，且有严格前提：
- 必须作用于设置了
overflow-y: auto或overflow-y: scroll的块级元素 - 不能写在
html或body上试图全局隐藏（Firefox 会忽略） - 值只能是
auto、thin、none，没有hidden或off - 建议加
scrollbar-color: transparent transparent做双重保险
典型错误写法：div { scrollbar-width: none; } 却没写 overflow-y —— 这时属性虽存在，但滚动上下文未建立，自然无效。
移动端 iOS Safari 的特殊处理
iOS Safari（尤其 iOS 15 及更早）对 ::-webkit-scrollbar 支持极差，甚至可能触发渲染异常。不要对它做任何适配：
- 不用
::-webkit-scrollbar，它在 iOS 上基本被忽略 - 确保父容器有
-webkit-overflow-scrolling: touch，避免卡顿和闪现 - 用
overscroll-behavior: contain抑制弹性回弹，减少误触感知 - 如果必须控制整个页面滚动，优先锁住
html, body { overflow-y: hidden; }，再给具体容器设overflow-auto
最易被忽略的一点：即使滚动条不可见，用户仍可通过触控板惯性滚动、鼠标滚轮、方向键操作——这些能力全靠 overflow 控制，和滚动条样式无关。别为了“看起来干净”而动错地方。
