必须用 overflow-y: auto/scroll 建立滚动上下文，再叠加 ::-webkit-scrollbar{display:none}（Chrome/Safari/Edge）、scrollbar-width:none（Firefox）和 -ms-overflow-style:none（IE/旧Edge）三套规则。
不能用 overflow: hidden ——它会直接砍掉滚动能力，不是隐藏滚动条。真正有效的方案是：先用 overflow-y: auto 或 overflow: scroll 建立滚动上下文，再叠加浏览器专属的隐藏规则。三套规则缺一不可，且每条都有硬性生效条件。
为什么 overflow: hidden 一定不能用
这个值会让元素彻底放弃滚动上下文，后果很实在：
-
scrollTop和scrollLeft设置无效，读取始终为0 -
scrollIntoView()静默失败，不报错也不滚动 - 鼠标滚轮、触控板、方向键、
PageUp/PageDown全部失效 - 移动端 Safari 可能触发弹性回弹，并意外显示原生滚动条
- 屏幕阅读器无法聚焦溢出内容，a11y 工具会报
focusable content is not reachable
::-webkit-scrollbar { display: none } 在 Chrome/Safari/Edge 中不生效
这条规则只在满足三个条件时才渲染伪元素：
- 目标元素必须有明确的
height或max-height（仅靠flex: 1或100vh不够稳定） - 必须显式设置
overflow-y: auto或overflow-y: scroll（overflow: auto可以，但overflow: visible不行） - 规则必须写在
<style>标签或外部 CSS 文件中，不能用内联样式
旧版 Safari（iOS 15 / macOS Monterey 12.3 及更早）不支持 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的块级元素（<div>、<section>），不能写在html或body上试图全局隐藏（Firefox 会忽略） - 值只能是
auto、thin、none，没有hidden或off - 必须搭配
scrollbar-color: transparent transparent做双重保险，否则某些版本仍可能残留轨道色块
典型错误：写了 scrollbar-width: none 却漏了 overflow-y —— 这时属性存在，但滚动上下文未建立，自然无效。
IE/Edge 旧版本和跨浏览器兜底写法
旧版 IE 和 Edge（非 Chromium 内核）需要 -ms-overflow-style: none；现代所有浏览器建议三者并存，顺序无关但必须共存：
.scroll-container {
overflow-y: auto;
-ms-overflow-style: none; /* IE/旧 Edge */
scrollbar-width: none; /* Firefox */
}
.scroll-container::-webkit-scrollbar {
display: none; /* Chrome/Safari/Edge (Chromium) */
}注意：-ms-overflow-style 和 scrollbar-width 都是声明式控制，不依赖伪元素渲染，所以对容器尺寸要求比 ::-webkit-scrollbar 宽松；但若父级用了 overflow: hidden，它们也会失效——因为根本没滚动上下文可作用。
最常被忽略的一点：所有这些规则都只对「真实发生内容溢出」的容器起作用。如果高度刚好卡死、内容没撑开、或者被 contain: paint 截断，浏览器连滚动条都不会生成，隐藏就无从谈起。
