关键原因是未配齐三件套：只设滑块透明却漏了::-webkit-scrollbar（需width/height）和::-webkit-scrollbar-track（需显式声明），导致规则被忽略；firefox中scrollbar-width: none等效但仅限64+版本且webkit不支持。
静止时滚动条完全透明，但滚动仍可用——关键不是“隐藏”，而是“视觉清空 + 行为保留”。
为什么 ::-webkit-scrollbar-thumb 设了 background: transparent 还是看得见？
最常见原因是没配齐三件套：只设滑块透明，但漏了轨道和整体尺寸声明。WebKit 内核（Chrome/Safari/Edge）要求必须同时定义：
-
::-webkit-scrollbar必须有width或height（哪怕设为0），否则整套规则被忽略 -
::-webkit-scrollbar-track必须显式声明，哪怕只是background: transparent；不写它，macOS Safari 会 fallback 到默认灰色轨道 -
::-webkit-scrollbar-thumb的background是刚需，不写 = 完全不可见（不是“半透”，是真透明到拖不动）
scrollbar-width: none 在 Firefox 中是否等效？
是，但它只对 Firefox 64+ 生效，且行为更干净：不占空间、不触发重绘、不依赖伪元素。但注意：
- 必须配合
overflow: auto或scroll和明确高度（比如max-height: 300px），否则无滚动行为，none也无效 - Chrome/Safari 完全无视这个属性，所以不能只靠它实现跨浏览器一致效果
- 别写成
scrollbar-width: hidden—— 这是非法值，浏览器直接丢弃整条声明
为什么 macOS Safari 滚动条始终“若隐若现”，hover 也不响应？
这是系统级策略叠加导致的，不是 CSS 写错了：
- iOS/macOS Safari 直到 16.4+ 才开始支持
::-webkit-scrollbar基础渲染，hover 和 active 伪类在多数版本中根本不会触发 - 如果父容器用了
transform或will-change，可能创建新层叠上下文，导致滚动条绘制异常；此时加overflow: scroll强制重绘反而更稳 - 不要把
::-webkit-scrollbar规则写在:hover或媒体查询里——旧版 Safari 不支持动态启用，规则压根不加载
真正能跨浏览器“静止透明”的最小可靠组合
不是单靠某个属性，而是分层兜底：
- 对 WebKit：用
::-webkit-scrollbar { width: 0; height: 0; }彻底移除尺寸，再补上::-webkit-scrollbar-track { background: transparent; }和::-webkit-scrollbar-thumb { background: transparent; } - 对 Firefox：加
scrollbar-width: none;，并确保容器有overflow-y: auto和固定高度 - 避免污染全局：所有规则都限定在具体类名下（如
.chat-log::-webkit-scrollbar），别写在html或body上 - 某些 UI 框架（如 Ant Design）会主动设
::-webkit-scrollbar { display: none; }，这时得用!important覆盖（虽不优雅，但实测必要）
最易被忽略的是：滚动条“静止透明”不等于“可滚动区域变小”。如果容器本身没设 height 或 max-height，内容不溢出，那整套样式根本不会渲染——伪元素只在真实滚动发生时才挂载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
