局部滚动条美化需分容器、分浏览器实现：chrome/safari需成套定义::-webkit-scrollbar系列伪元素并显式设置overflow和尺寸；firefox仅支持scrollbar-width和scrollbar-color；ios safari完全忽略所有相关css。
局部滚动条美化必须分容器写、分浏览器配，没有“一套代码通吃”的写法。直接给 body 或全局写 ::-webkit-scrollbar 基本无效，Firefox 更是只认两个属性，还只对可滚动块生效。
局部容器必须显式设 overflow
浏览器只对「内容真实溢出 + 显式声明 overflow: auto 或 scroll」的块级元素应用自定义滚动条。漏掉任意一步，::-webkit-scrollbar 就不会渲染。
-
.chat-log { height: 400px; overflow-y: auto; }—— 必须有具体高度或 max-height，否则不触发溢出 - 不要写
div::-webkit-scrollbar这种泛选择器，它会污染所有 div，且多数无效 - 嵌套滚动容器（如弹窗里再套一个
overflow: auto的列表）在 Firefox 中完全不响应scrollbar-color
::-webkit-scrollbar 必须成套定义才生效
Chrome/Edge/Safari 下，漏掉 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb 中任意一个，整个自定义逻辑就回退到原生样式——不是“部分生效”，而是彻底失效。
-
::-webkit-scrollbar { width: 8px; }—— 控制垂直滚动条粗细；水平滚动条用height: 8px -
::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }——background必须设，否则轨道透明，和页面底色打架 -
::-webkit-scrollbar-thumb { background: #6c5ce7; border-radius: 4px; min-height: 40px; }——border-radius别超height / 2；min-height防止 WebKit 强制压缩滑块 -
::-webkit-scrollbar-thumb:hover { background: #5a4bc5; }—— 悬停有效，但移动端无 hover，别依赖它做核心交互
Firefox 只支持 scrollbar-width 和 scrollbar-color
Firefox 不认任何 ::-webkit- 伪元素，::-moz-scrollbar 已废弃多年。能用的只有两个属性，且必须写在可滚动容器上（不能只写 html 或 body）。
-
.chat-log { scrollbar-width: thin; scrollbar-color: #6c5ce7 #f0f0f0; }—— 这才是 Firefox 下真正生效的写法 -
scrollbar-color格式固定为scrollbar-color: <thumb><track></track></thumb>，不支持圆角、渐变、阴影 - 深色模式下，Firefox 可能按系统主题映射颜色，
#6c5ce7可能被渲染为更深的紫色，这不是 bug，是设计行为 - 别写
scrollbar-color: transparent transparent—— 它会让滑块不可见，但用户仍能滚轮滚动，属于视觉崩溃，不是隐藏
iOS Safari 完全忽略所有滚动条 CSS
无论你写多少 ::-webkit-scrollbar 或 scrollbar-color，iOS Safari（包括 iPadOS）统统不解析。这不是兼容性问题，是苹果明确禁用。
- 测试时千万别用 macOS Safari 代替 iOS 测试，两者渲染差异极大
- 若项目强依赖水平滚动（比如宽表格、时间轴），可用
overflow-x: scroll; -webkit-overflow-scrolling: touch;—— 虽已废弃，但仍有惯性滚动效果 - 真要统一外观？JS 库如
simplebar是唯一解，但它会接管原生滚动逻辑，可能影响性能和可访问性
最容易被忽略的一点：深色模式需要重复整套 ::-webkit-scrollbar 规则，不能靠 @media (prefers-color-scheme: dark) 包裹后只改颜色——因为伪元素本身不继承，必须重写全部部件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
