正确隐藏滚动条应避免display: none，而用width: 4px + opacity: 0/transparent配合overflow: auto，并为Firefox加scrollbar-width: none；Safari 16前仅支持-webkit-方案，需兼顾触控板与键盘滚动体验。
display: none 不能隐藏滚动条伪类，这是常见误解
直接对 ::-webkit-scrollbar 用 display: none 确实能“隐藏”滚动条，但只在 Chromium/WebKit 内核生效，且部分旧版 Safari 会因此禁用滚动——不是视觉隐藏，而是功能失效。这不是兼容方案，而是埋雷操作。
正确做法：用 width/height + opacity 配合 overflow
核心思路是让滚动条轨道和滑块“不可见但占位”，避免触发浏览器的滚动降级逻辑。关键不是删掉它，而是让它透明且窄到肉眼不可辨：
-
width: 0或width: 4px（设为极小值，保留拖动热区） -
opacity: 0或background: transparent（消除视觉残留） - 必须同时设置
overflow: auto或scroll在容器上，否则滚动行为本身可能被抑制
.scroll-hidden {
overflow-y: scroll;
}
.scroll-hidden::-webkit-scrollbar {
width: 4px; /* 不要设为 0，否则某些 Chrome 版本无法拖动 */
}
.scroll-hidden::-webkit-scrollbar-track {
background: transparent;
}
.scroll-hidden::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 2px;
}
/* Firefox 需额外处理 */
.scroll-hidden {
scrollbar-width: none; /* Firefox 64+ */
}
.scroll-hidden::-moz-range-thumb {
display: none; /* Firefox 不支持 scrollbar-thumb，此行无效，仅作提醒 */
}Firefox 和 Safari 的兼容性差异必须单独处理
Firefox 只认 scrollbar-width: none（仅限 auto 或 thin），不支持伪类；Safari 17.4+ 才开始部分支持 scrollbar-width，此前版本只能靠 `-webkit-` 前缀 + 宽度压缩。这意味着：
- 纯 CSS 隐藏滚动条无法 100% 跨浏览器一致生效
- 如果项目需支持 Safari 16 或更早，
width: 4px+opacity: 0是唯一可靠路径 -
scrollbar-width: none在 Firefox 中会彻底移除滚动条，但滚动功能保留——这点比 WebKit 更干净
容易忽略的交互陷阱：键盘滚动和触控板惯性失效
当滚动条宽度压到 2px 以下时，macOS 触控板的滚动惯性可能变弱，Windows 键盘 Page Down 响应延迟升高。这不是 bug，是浏览器对“极窄滚动条”的主动降级策略：
立即学习“前端免费学习笔记（深入）”；
- 测试时务必用真实触控板/键盘操作，别只靠鼠标滚轮
- 若产品面向内容密集型场景（如文档阅读器），建议保留
width: 6px并用background: rgba(0,0,0,0.05)微调，平衡隐藏与可用性 - 无障碍访问（a11y）不受影响——滚动功能、焦点导航、ARIA 属性均正常工作
真正难的是在“看不见”和“点得着”之间卡那 1px 的精度，多试两个像素值比查十篇教程管用。
