必须三套并行：firefox用scrollbar-width: none，chrome/safari/edge用::-webkit-scrollbar设width: 0+transparent，旧ie/edge用-ms-overflow-style: none；均需配合overflow: auto或scroll，不可用overflow: hidden。
Chrome/Firefox中隐藏滚动条但保留滚动功能
主流浏览器里，overflow: scroll 默认显示原生滚动条，想“看不见但能用”，得靠伪元素或CSS属性干预。核心思路是：不禁止滚动行为，只让滚动条视觉不可见。
Firefox 和新版 Chrome（基于 Blink）支持 scrollbar-width 和 scrollbar-color，这是最轻量、最安全的方式：
.scroll-container {
overflow: auto;
scrollbar-width: none; /* Firefox 隐藏 */
scrollbar-color: transparent transparent; /* Firefox：滑块+轨道都透明 */
}
<p>.scroll-container::-webkit-scrollbar {
display: none; /<em> Chrome/Safari/Edge 隐藏 </em>/
}</p>
注意：scrollbar-width: none 仅在 Firefox 64+ 生效；::-webkit-scrollbar 在 Safari 16.4+ 才支持 display: none，旧版 Safari 需用 width: 0 + height: 0 配合 opacity: 0。
为什么不能直接用 overflow: hidden？
overflow: hidden 会彻底禁用滚动，用户无法用鼠标滚轮、触摸板、键盘方向键或 element.scrollTop 滚动内容——这不是“隐藏滚动条”，而是“砍掉滚动能力”。
- 滚动事件（如
scroll）不会触发 -
scrollTop/scrollLeft设置无效 - 触摸设备上内容无法拖拽滑动
所以必须保留 overflow: auto 或 overflow: scroll，再单独处理滚动条样式。
Safari 15–16.3 的兼容性陷阱
这些版本的 Safari 不支持 ::-webkit-scrollbar { display: none }，强行写会忽略该规则，滚动条照常显示。此时只能退而求其次：
- 用
::-webkit-scrollbar { width: 0; height: 0; }缩小尺寸 - 加
::-webkit-scrollbar-track { background: transparent; }和::-webkit-scrollbar-thumb { background: transparent; }确保无残留色块 - 必要时加
padding-right: 17px（滚动条宽度）并用margin-right: -17px抵消，防止内容被遮挡
这种方案在部分 Safari 上仍可能留下极细白线或点击热区，属于已知限制，没有完美绕过办法。
滚动条隐藏后，如何确保可访问性？
视觉隐藏不等于交互禁用，但屏幕阅读器或键盘导航用户可能因缺少滚动条提示而困惑。关键点：
- 保持容器有明确的
tabindex="0"，确保能获得焦点 - 内容高度超出容器时，务必提供其他滚动线索（比如底部渐变遮罩、箭头图标、或文案提示“可上下滑动”）
- 避免在无 hover/active 状态下完全抹除滚动暗示——例如，只在
:hover显示滚动条，对触屏设备无效
真正难的不是“怎么藏”，而是藏完之后，用户是否还能凭直觉知道这里能滚、该怎么滚。这点常被忽略，直到 QA 提出“盲人测试失败”才补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
