最干净方案是用::-webkit-scrollbar{display:none}和scrollbar-width:none隐藏视觉滚动条，保留所有滚动交互与可访问性，需配合overflow:auto/scroll及兼容性处理。
直接用 ::-webkit-scrollbar + scrollbar-width 隐藏视觉滚动条，滚动功能完全不受影响
这是最干净、无 js、不干扰可访问性的方案。关键不是“禁用滚动”，而是让滚动条“看不见但摸得着”——手指滑、鼠标滚、键盘上下键全都能用。
-
::-webkit-scrollbar { display: none; }覆盖 Chrome / Edge / Safari（16.4+）；旧版 Safari（如 iOS 15 及更早）不支持display: none，得降级为width: 0; height: 0;并清空 track/thumb 样式 -
scrollbar-width: none;是 Firefox 64+ 原生支持的属性，必须写在选择器里（不能只写在:root或全局*下），建议用@supports包一层保兼容 - 别漏掉
overflow: auto或overflow: scroll——没有它，容器根本不会产生滚动上下文，隐藏滚动条也就没意义了
Bootstrap 里局部滚动区域（如 .card-body）要隐藏滚动条？先锁死全局滚动
很多人试了伪元素却还是看到页面整体滚动条，问题不在局部样式，而在 html 和 body 没管住。
- 必须加：
html, body { height: 100%; overflow-y: hidden; overflow-x: hidden; }，否则 Bootstrap 的 flex 布局或vh高度容器会撑出全局滚动 -
.card-body要能滚动，得满足两个条件：父容器（比如.card）有明确高度（height: 100%或flex-fill），且自身设overflow-auto类或overflow: auto - 移动端注意加
-webkit-overflow-scrolling: touch，不然 iOS Safari 滚动卡顿，还可能闪出原生滚动条
为什么 overflow: hidden 不行？它不是“隐藏”，是“砍掉”
这是最常踩的坑：一看到滚动条就本能加 overflow: hidden，结果内容截断、键盘导航失效、屏幕阅读器读不到溢出内容。
-
overflow: hidden会彻底丢弃滚动能力，连scrollTop属性都失效，scrollIntoView()也会静默失败 - 无障碍（a11y）层面，它让键盘用户无法用
Tab进入溢出区域，也破坏了focusable元素的可达性 - 如果真要“视觉隐藏但保留交互”，唯一正解就是伪元素/标准属性隐藏滚动条本身，而不是动
overflow的行为逻辑
Firefox 和 Safari 低版本兼容性怎么兜底？别信“全浏览器一行解决”
网上很多代码写 * { scrollbar-width: none; } 或只配 ::-webkit-scrollbar，在真实项目里很容易翻车。
- Firefox 旧版本（scrollbar-width，也没等效替代，只能接受它显示细滚动条，或放弃隐藏
- iOS Safari ≤15 不支持
::-webkit-scrollbar { display: none; }，必须用width: 0+background: transparent+border: none组合拳 - IE 已淘汰，不用考虑；但若真要兼容，只能换路子：用固定宽高的 wrapper +
position: absolute内容偏移（方法3），但会增加 DOM 层级和维护成本
实际开发中，最易被忽略的是：滚动容器的高度链是否闭合。哪怕 CSS 伪元素全写对了，只要父级某个环节是 height: auto 或没设 flex: 1，overflow 就不会触发，滚动条自然不会出现——那“隐藏”也就成了无本之木。
