能隐藏滚动条又保留滚动能力，必须满足两个前提：容器有明确尺寸限制且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 唯一原生支持、语义最干净的方案，只影响视觉，不干扰滚动逻辑或无障碍访问。
-
scrollbar-width必须写在设置了overflow-y: auto或scroll的块级元素上，写在html或body上会失效 - 只接受三个值：
auto（默认）、thin、none；写成hidden或0会被忽略 - 对
<textarea></textarea>、<select></select>等表单控件无效 - Firefox 64+ 才支持，旧版本需降级处理
Chrome / Edge / Safari（macOS）靠 ::-webkit-scrollbar 全清零
这不是可选装饰，而是 WebKit/Blink 下唯一可靠路径。但只写 ::-webkit-scrollbar { display: none } 在部分旧版 Safari（iOS 15 及更早）中不生效，稳妥写法是把宽高设为 0 并清空背景。
- 父容器必须有明确的
height或max-height，且已启用overflow-y: auto - 必须同时覆盖
::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，否则某些 Chrome 版本仍留白边 - 不能用内联样式，只能放在
<style></style>标签或外部 CSS 文件里 - iOS Safari 完全忽略该伪元素——别白费劲，它本来就不显示滚动条
IE / 旧 Edge 需要 -ms-overflow-style: none
这个属性只对 IE10+ 和 EdgeHTML 引擎有效，现代 Chromium Edge 已废弃，但仍有遗留项目需兼容。
- 仅控制垂直滚动条，且必须搭配
overflow-y: scroll或auto才触发 - 写在
html或body上会失效，建议限定到具体容器如.list-container - 与
scrollbar-width: none共存时互不干扰：Firefox 忽略前者，IE 忽略后者 - 新版 Edge（Blink 内核）写这个毫无效果，也不报错，容易误判兼容性
最容易被忽略的是：所有隐藏方案生效后，若容器原本有 padding-right，内容可能被裁切——得手动补 padding-right: 0 校准；另外，移动端 Safari 对伪元素支持不稳定，iOS 16+ 才较可靠，而 iOS 15 及更早必须用 width: 0; height: 0; 替代 display: none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
