如何用CSS隐藏滚动条并保留滚动功能？

能隐藏滚动条又保留滚动能力，必须满足两个前提：容器有明确尺寸限制且overflow设为auto或scroll；Firefox用scrollbar-width:none，Chrome/Safari/Edge用::-webkit-scrollbar{width:0;height:0}，IE/旧Edge用-ms-overflow-style:none。

能隐藏滚动条又不破坏滚动能力的方案，必须同时满足两个前提：容器有明确尺寸限制 + overflow 设为 auto 或 scroll。用 overflow: hidden 不是“隐藏”，而是直接砍掉滚动上下文——scrollTop 失效、scrollIntoView() 静默失败、键盘和屏幕阅读器也进不去溢出区域。

Firefox 用 scrollbar-width: none 就够了

这是 Firefox 唯一原生支持、语义最干净的方案，只影响视觉，不干扰滚动逻辑或无障碍访问。

1. scrollbar-width 必须写在设置了 overflow-y: auto 或 scroll 的块级元素上，写在 html 或 body 上会失效
2. 只接受三个值：auto（默认）、thin、none；写成 hidden 或 0 会被忽略
3. 对 <textarea>、<select> 等表单控件无效
4. Firefox 64+ 才支持，旧版本需降级处理

Chrome / Edge / Safari（macOS）靠 ::-webkit-scrollbar 全清零

这不是可选装饰，而是 WebKit/Blink 下唯一可靠路径。但只写 ::-webkit-scrollbar { display: none } 在部分旧版 Safari（iOS 15 及更早）中不生效，稳妥写法是把宽高设为 0 并清空背景。

1. 父容器必须有明确的 height 或 max-height，且已启用 overflow-y: auto
2. 必须同时覆盖 ::-webkit-scrollbar、::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb，否则某些 Chrome 版本仍留白边
3. 不能用内联样式，只能放在 <style> 标签或外部 CSS 文件里
4. iOS Safari 完全忽略该伪元素——别白费劲，它本来就不显示滚动条

IE / 旧 Edge 需要 -ms-overflow-style: none

这个属性只对 IE10+ 和 EdgeHTML 引擎有效，现代 Chromium Edge 已废弃，但仍有遗留项目需兼容。

1. 仅控制垂直滚动条，且必须搭配 overflow-y: scroll 或 auto 才触发
2. 写在 html 或 body 上会失效，建议限定到具体容器如 .list-container
3. 与 scrollbar-width: none 共存时互不干扰：Firefox 忽略前者，IE 忽略后者
4. 新版 Edge（Blink 内核）写这个毫无效果，也不报错，容易误判兼容性

最容易被忽略的是：所有隐藏方案生效后，若容器原本有 padding-right，内容可能被裁切——得手动补 padding-right: 0 校准；另外，移动端 Safari 对伪元素支持不稳定，iOS 16+ 才较可靠，而 iOS 15 及更早必须用 width: 0; height: 0; 替代 display: none。