chrome/edge 可用 ::-webkit-scrollbar-track 与 ::-webkit-scrollbar-track-piece 实现双层轨道，firefox 和 ios safari 完全不支持，仅能降级为单色滚动条或放弃自定义。
Chrome / Edge 中用 ::-webkit-scrollbar 套两层伪元素
双层轨道（即外层是背景色轨道，内层是带边框/阴影的滑块轨道）不是标准滚动条结构，但 Chromium 内核浏览器支持通过组合 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-track-piece 实现视觉分层。
关键在于：外层用 ::-webkit-scrollbar-track 设背景和圆角，内层用 ::-webkit-scrollbar-track-piece 覆盖一层更窄、带 border 或 box-shadow 的区域。两者需配合 margin 或 padding 留出间隙，才能看出“双层”感。
-
::-webkit-scrollbar-track必须设background-color和border-radius，否则内层无依托 -
::-webkit-scrollbar-track-piece不能设width/height，它由父 track 的padding控制尺寸；推荐用padding: 2px在 track 内缩出空隙 - 若同时设
::-webkit-scrollbar-thumb，注意它的border-radius应略小于 track-piece，避免滑块卡在夹层里
::-webkit-scrollbar-track {
background-color: #f0f0f0;
border-radius: 10px;
padding: 4px;
}
::-webkit-scrollbar-track-piece {
background-color: #e0e0e0;
border-radius: 8px;
box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
background-color: #c0c0c0;
border-radius: 6px;
}
Firefox 不支持双层轨道，scrollbar-width 只能开关或设粗细
Firefox 完全不识别 ::-webkit-scrollbar 系列伪类，其原生滚动条样式仅由 scrollbar-width（auto/thin/none）和 scrollbar-color（thumb + track 颜色）控制，无法实现轨道嵌套或边框分层。
这意味着：任何依赖 ::-webkit-scrollbar-track-piece 的双层效果在 Firefox 中会退化为单层 scrollbar-color 轨道，且 padding/box-shadow 全部失效。
- 不要试图用
@supports检测::-webkit-scrollbar来做降级——Firefox 根本不解析这些规则，连 fallback 都不会触发 - 如果必须跨浏览器一致，只能放弃双层视觉，统一用
scrollbar-color: #c0c0c0 #f0f0f0+scrollbar-width: thin - 某些 UI 库（如 OverlayScrollbars）会用 JS 模拟滚动条，可自定义 DOM 结构实现真双层，但会失去原生滚动性能和键盘/触控行为
移动端 Safari 完全忽略所有自定义滚动条规则
iOS 和 iPadOS 的 Safari 对 ::-webkit-scrollbar 的支持是空的——无论加多少伪类、样式，滚动条始终是系统原生样式，且不可隐藏（overflow: overlay 也不生效）。
这意味着你在桌面 Chrome 里调好的双层轨道，在 iPhone 上打开就是默认灰色细条，没有任何过渡或 fallback 提示。
- 不要在
@media (hover: none)或pointer: coarse下尝试重写 scrollbar 样式——Safari 连规则都不读 - 若产品强依赖滚动条视觉（比如设计稿明确要求双层轨道），需提前和设计对齐：iOS 端接受原生样式，或改用 canvas/iframe 滚动模拟（代价高，慎用）
- 可通过
element.addEventListener('scroll', ...)监听滚动位置，用绝对定位元素模拟“轨道指示器”，但这只是视觉示意，不是真实滚动条
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
