真正能隐藏滚动条又保留滚动能力的方案需满足：容器有明确尺寸且overflow设为auto/scroll，再分浏览器处理——Firefox用scrollbar-width:none，Chrome/Edge/Safari用::-webkit-scrollbar全隐藏，IE/旧Edge用-ms-overflow-style:none。
不能用 overflow: hidden ——它直接砍掉滚动能力，不是“隐藏”。真正能保留滚动的方案必须同时满足两个条件：容器有明确的尺寸限制 + overflow 值设为 auto 或 scroll，再叠加浏览器专属隐藏手段。
Firefox 用 scrollbar-width: none 就够了
这是 Firefox 唯一原生支持的、语义最清晰的方案。它只影响视觉，不干扰 scrollTop、键盘方向键或屏幕阅读器。
-
scrollbar-width必须写在设置了overflow-y: auto或scroll的元素上，否则无效 - 只接受三个值：
auto（默认）、thin、none；写成hidden或0会被忽略 - 对
<textarea></textarea>、<select></select>等表单控件无效，仅作用于块级溢出容器 - 不能写在
html或body上试图全局隐藏——在 Firefox 中会失效，且可能破坏模态框滚动
Chrome / Edge / Safari（macOS）靠 ::-webkit-scrollbar 隐藏
这个伪元素不是“可选装饰”，而是 WebKit/Blink 下唯一可靠路径。但必须写全，且满足渲染前提。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 父容器必须有明确的
height或max-height，且overflow-y: auto已启用 - 只写
::-webkit-scrollbar { display: none }在部分旧版 Safari（iOS 15 及更早）中不生效，稳妥写法是：width: 0; height: 0; - 必须同时覆盖
::-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 校准；另外，所有方案都依赖用户实际触发滚动行为（鼠标滚轮、触摸拖拽、键盘方向键），没有“自动滚动”逻辑，这点常被测试遗漏。
