要隐藏滚动条但保留滚动功能，必须同时使用三套浏览器专属方案：Firefox用scrollbar-width: none，IE/旧Edge用-ms-overflow-style: none，WebKit/Blink浏览器用::-webkit-scrollbar{display:none}，且均需配合overflow-y生效。
scrollbar-width: none 只对 Firefox 有效
scrollbar-width 是 Firefox 专用的非标准属性，仅在 Firefox 64+ 中生效，其他浏览器完全忽略它。它不能单独使用，必须配合 overflow 才能真正启用滚动——否则内容被裁剪却无法滚动，容易误以为“失效”。
常见错误现象：scrollbar-width: none 写了但滚动条还在，其实是没加 overflow-y: auto 或 overflow-y: scroll；或者写了但 Chrome/Safari 里滚动条没消失，这是预期行为，不是 bug。
- 必须显式设置容器高度（或 max-height）和
overflow-y，否则scrollbar-width不起作用 - 值只有三个：
auto（默认）、thin、none；只有none能隐藏 - 不支持选择器如
::-webkit-scrollbar那样细化到轨道/滑块，是整条滚动条开关
-ms-overflow-style: none 对 IE/Edge Legacy 有效
-ms-overflow-style: none 是 IE10+ 和旧版 Edge（EdgeHTML 引擎）的专属写法，对应现代 Chromium Edge 已废弃。它只影响垂直滚动条，且仅当容器有 overflow-y: scroll 或 auto 时才生效。
容易踩的坑：在新版 Edge（Blink 内核）或 Chrome 中写这个属性毫无效果，但也不会报错，容易让人误判兼容性范围。
- 必须与
overflow同时存在，单独写无效 - 不能用在
html或body上隐藏整个页面滚动条（会失效），建议作用于具体容器 - 若同时用了
scrollbar-width: none和-ms-overflow-style: none，Firefox 和 IE/旧 Edge 各自按需响应，互不干扰
::-webkit-scrollbar{display: none} 是 Chrome/Safari 的关键
::-webkit-scrollbar 是 WebKit/Blink 内核浏览器（Chrome、Safari、新版 Edge）唯一可靠的隐藏方式。注意它是个伪元素，display: none 是最简写法，比设 width: 0 更彻底，且无需额外处理轨道或滑块。
典型错误：只写 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb 却漏掉主伪元素，滚动条仍可见；或者加了 !important 导致在某些 Safari 版本中失效。
- 必须搭配
overflow-y: auto或scroll，否则伪元素不渲染 - 不能用于内联样式，只能写在
或 CSS 文件中 - 在移动端 Safari 上，即使隐藏了，用户仍可通过惯性拖拽滚动，体验不受影响
跨浏览器组合写法必须三者共存
没有单一样式能覆盖所有主流浏览器。要真正“隐藏滚动条但保留滚动”，必须把三套规则写全，且顺序无关，浏览器各取所需：
div.scrollable {
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/旧 Edge */
}
div.scrollable::-webkit-scrollbar {
display: none; /* Chrome/Safari/新版 Edge */
}
复杂点在于：滚动条宽度本身不固定（Windows/Linux 下常为 17px，macOS 默认隐藏，触控设备可能无滚动条），所以基于“移动内容躲开滚动条”的 hack（如 right: -17px）不可靠，维护成本高。原生 CSS 属性方案虽需多写几行，但更稳定、语义清晰、无计算误差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
