设置::-webkit-scrollbar-track需先定义::-webkit-scrollbar宽度，配合overflow:auto|scroll容器生效，推荐加box-shadow增强层次感，rtl页面无需修改样式规则。
如何设置 ::-webkit-scrollbar-track 轨道背景与圆角
轨道（track）是滚动条的底层区域，不设置它时默认是透明或系统色，容易和页面背景打架。必须先定义 ::-webkit-scrollbar 宽度，否则 ::-webkit-scrollbar-track 不生效。
常见错误：只写 background-color 却忽略 border-radius，导致滑块拖动时视觉割裂；或用太浅的灰（如 #f9f9f9）在白色背景上完全不可见。
-
::-webkit-scrollbar-track必须配合overflow: auto | scroll的容器才起作用 - 推荐加
box-shadow: inset 0 0 4px rgba(0,0,0,0.05)增强层次感，比纯色更稳 - RTL 页面中，
direction: rtl会翻转轨道左右结构，但样式规则本身无需修改
如何控制 ::-webkit-scrollbar-thumb 滑块尺寸与交互反馈
滑块（thumb）太细（width: 4px）会导致点击困难，太粗（width: 16px）又侵占内容空间。实际项目里 8px–12px 是较安全的区间。
用户常忽略 hover 和 active 状态：没加 :hover 时，滑块颜色不变，缺乏操作确认；没设 :active 则拖拽瞬间无反馈，感觉“卡住”。
- 用
background: linear-gradient或background-image可做渐变滑块，但 Safari 旧版可能渲染异常 - 避免
opacity动画——滚动过程中频繁重绘会掉帧，改用transition: background-color .2s更稳妥 - 移动端 Safari 对
::-webkit-scrollbar-thumb:hover支持不稳定，建议统一用:active覆盖
Firefox 下如何降级处理 scrollbar 样式
Firefox 完全不识别 ::-webkit-scrollbar 系列，强行写只会被忽略。从 Firefox 64 开始支持两个原生属性：scrollbar-width 和 scrollbar-color，但仅限于根滚动条（html 或 body），无法作用于局部容器。
这意味着：给 .list-container 写 scrollbar-color: #666 #eee 是无效的。你只能对整页滚动条做简化适配。
-
scrollbar-width: thin | auto | none——thin在 Firefox 中表现接近 Chrome 的8px，但不可精确控制像素值 -
scrollbar-color: <thumb-color><track-color></track-color></thumb-color>—— 顺序不能反，且不支持rgba()或渐变 - 若需局部滚动条一致体验，必须引入 JS 库（如
simplebar），但要注意其会劫持原生scroll事件，影响IntersectionObserver行为
为什么局部滚动条美化总失效？检查这三点
最常踩的坑不是写错选择器，而是容器本身没触发滚动机制。CSS 自定义滚动条是“装饰层”，前提是底层滚动行为真实存在。
- 容器必须有明确高度 +
overflow-y: auto或scroll；overflow: hidden会直接隐藏滚动条，伪元素也无效 - 父级或祖先元素用了
transform、will-change或filter，可能创建新层叠上下文，导致::-webkit-scrollbar选择器权重不足 - 使用了 CSS-in-JS（如 Emotion）时，
&嵌套写法可能编译出带哈希的类名，使.my-list::-webkit-scrollbar实际匹配不到目标元素
真正难的不是写出好看的滚动条，而是让它的存在不干扰可访问性——比如高对比度模式下，#ccc 滑块在灰色背景上几乎隐形，而屏幕阅读器不会读取伪元素样式。这点容易被跳过，但上线前必须实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
