必须三套并行：firefox用scrollbar-width: none，chrome/edge/safari用::-webkit-scrollbar系列伪元素，旧ie/edge用-ms-overflow-style: none，且均需配合overflow-y: auto或scroll生效；overflow: hidden会彻底禁用滚动而非隐藏。
直接用 overflow: hidden 会彻底禁用滚动，不是隐藏——这是最常踩的坑。真正可行的方案必须三套并行：Firefox 用 scrollbar-width: none，Chrome/Edge/Safari 用 ::-webkit-scrollbar 系列伪元素控制，旧版 IE/Edge 用 -ms-overflow-style: none，且每套都依赖 overflow-y: auto 或 scroll 生效。
为什么 overflow: hidden 绝对不能用
它不隐藏滚动条，而是直接砍掉滚动上下文：内容被裁剪、scrollTop 失效、scrollIntoView() 静默失败、键盘方向键和屏幕阅读器无法访问溢出区域。移动端 Safari 还可能因此触发弹性回弹，意外暴露原生滚动条。
-
overflow: hidden不生成滚动条，也不保留滚动能力 - 即使加了
pointer-events: none或visibility: hidden，也无法恢复滚动行为 - 无障碍检测工具会报 “focusable content is not reachable”
::-webkit-scrollbar 在 Chrome/Safari/Edge 中怎么写才生效
这个伪元素只在 WebKit/Blink 内核中渲染，但必须满足三个硬性条件，缺一不可：
- 目标容器要有明确的
height或max-height - 必须设置
overflow-y: auto或scroll（仅visible不行） - 样式必须写在
<style></style>标签或外部 CSS 文件中，不能用内联样式
推荐写法（兼顾拖动热区与兼容性）：
.scroll-container {
overflow-y: auto;
}
.scroll-container::-webkit-scrollbar {
width: 4px;
}
.scroll-container::-webkit-scrollbar-track {
background: transparent;
}
.scroll-container::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 2px;
}
注意：width: 0 在某些 Chrome 版本会导致无法拖动；display: none 虽简洁，但在 iOS 15 及更早 Safari 中不支持，需降级为 width: 0; height: 0; background: transparent。
scrollbar-width: none 在 Firefox 中为何有时没反应
这个属性只在 Firefox 64+ 生效，且有严格前提：
- 只能作用于设置了
overflow-y: auto或scroll的块级元素，不能直接写在html或body上试图全局隐藏（Firefox 会忽略） - 值只有
auto、thin、none三种，没有hidden或off - 对
<textarea></textarea>、<select></select>等表单控件无效
保险写法（双重兜底）：
.scroll-container {
overflow-y: auto;
scrollbar-width: none;
scrollbar-color: transparent transparent;
}
容易被忽略的交互陷阱：触控板与键盘响应变弱
当把 ::-webkit-scrollbar 宽度压到 2px 以下时，macOS 触控板的滚动惯性可能明显减弱，Windows 键盘 Page Down 响应延迟升高——这不是 bug，是浏览器对“极窄滚动条”的主动降级策略。
此外，iOS Safari 完全不支持 ::-webkit-scrollbar，任何相关样式都会被忽略；Safari 17.4+ 才开始部分支持 scrollbar-width，此前版本只能靠 -webkit- 前缀 + 极小宽度压缩实现视觉隐藏。
真正跨浏览器可用的方案，从来不是“写一个规则”，而是组合声明、逐个验证、留好降级路径——尤其是当设计要求“完全看不见滚动条”时，滚动热区宽度和交互反馈必须手动校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
