Firefox 用 scrollbar-width: none 隐藏滚动条，需配合 overflow: auto/scroll；Chrome/Safari 须用 ::-webkit-scrollbar + padding 补偿；无跨浏览器一劳永逸方案。
Firefox 里 scrollbar-width: none 不生效？
这个属性只在 Firefox（Gecko 内核）中有效，Chrome/Safari/Edge 完全不识别，写了也白写。它不是 CSS 标准属性，而是 Firefox 的私有扩展，连 @supports 都没法可靠检测——@supports (scrollbar-width: none) 在旧版 Firefox 返回 false，新版又可能误判。
- 必须搭配
overflow: auto或scroll才能触发隐藏逻辑，overflow: hidden会直接禁用滚动，不是“隐藏滚动条” - 仅作用于元素自身，不影响子元素或 body；想隐藏整个页面滚动条，得写
html { scrollbar-width: none; } - 移动端 Firefox for Android 支持，但部分定制 ROM（如三星 Internet）可能忽略该声明
Chrome/Safari 怎么隐藏滚动条又保留滚动功能？
靠伪元素 + 透明覆盖 + padding 补偿。核心是用 ::-webkit-scrollbar 系列伪类把滚动条“视觉抹掉”，同时确保内容可拖动、键盘可滚动、触屏可滑动。
-
::-webkit-scrollbar必须设width或height（哪怕0），否则伪元素不渲染 - 只设
display: none或visibility: hidden不够，iOS Safari 仍会保留滚动区域空白，得用width: 0 !important+opacity: 0双保险 - 隐藏后，右侧内容会被“吃掉”一部分（滚动条原本占的空间），需给容器加
padding-right: 15px（或用calc(100% + 15px)宽度补偿）
div.scrollable {
overflow-y: auto;
padding-right: 15px;
}
div.scrollable::-webkit-scrollbar {
width: 0 !important;
opacity: 0;
}
隐藏滚动条后，用户真的找不到滚动方式了？
真会。尤其在无 hover 效果的触屏设备上，纯靠视觉暗示（比如内容截断、阴影、箭头图标）引导滚动，比依赖滚动条更关键。
- iOS Safari 隐藏后，首次滑动需用力“猛拉”一下才触发惯性滚动，轻扫容易失效
- 键盘
Space/PageDown仍可用，但屏幕阅读器可能跳过被opacity: 0覆盖的伪元素，建议加aria-hidden="true"到滚动容器 - 别对所有滚动容器统一隐藏——表格、代码块、日志列表这类需要精确滚动定位的场景，留着滚动条反而更友好
有没有一劳永逸的方案？
没有。CSS 层面不存在跨浏览器兼容的“隐藏但保留交互”的单一属性。最稳妥的做法是分环境处理：
立即学习“前端免费学习笔记（深入）”；
- Firefox：用
scrollbar-width: none - WebKit 内核：用
::-webkit-scrollbar套路 + padding 补偿 - 需要精细控制时，改用 JS 滚动库（如
simplebar），但它会替换原生滚动行为，影响 touchmove 性能和系统级手势（比如 iOS 页面回退）
真正麻烦的不是怎么写 CSS，而是隐藏之后——用户划不动、找不到滚动入口、或者滚到一半卡住，这些问题往往要等真机测试才能暴露。
