Safari≥16已废弃::-webkit-scrollbar，仅Chrome/Edge/旧版Safari支持；Firefox完全不支持，仅兼容scrollbar-width和scrollbar-color；真自定义需JS模拟滚动并补全可访问性。
Chrome/Firefox 中 ::-webkit-scrollbar 为什么在 Safari 不生效
因为 Safari 从 macOS Monterey（12.3）起已废弃 ::-webkit-scrollbar 系列伪元素，仅保留基础滚动行为支持。这不是兼容性 bug，而是标准演进下的主动移除。
- 仅 Chrome、Edge、旧版 Safari（≤15.6）和部分 Android WebView 支持
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb - Firefox 完全不支持任何自定义滚动条伪类，靠
scrollbar-width和scrollbar-color控制粗略样式 - 现代 Safari（≥16）对
::-webkit-scrollbar返回空规则，也不报错，容易误以为“没写对”
scrollbar-width 和 scrollbar-color 能做什么、不能做什么
这是目前唯一跨浏览器（Firefox + 新 Safari + 新 Edge）可用的原生方案，但能力极有限：只能设滑块颜色和轨道颜色，不能改形状、圆角、阴影或尺寸。
-
scrollbar-width只接受auto、thin、none三个值；thin在 Safari 中实际表现不稳定，有时仍显示默认宽度 -
scrollbar-color语法是scrollbar-color: <thumb-color><track-color></track-color></thumb-color>，顺序不能反，且不支持透明度以外的 color 函数（如hsl()可用，rgb(0 0 0 / 0.2)在旧 Firefox 中会失效） - 这两个属性必须写在根滚动容器上（通常是
html或带overflow: auto的div），写在子元素上无效
html {
scrollbar-width: thin;
scrollbar-color: #6c6c6c #f0f0f0;
}真要完全自定义？只能 JS + CSS 模拟滚动容器
当设计要求滑块带图标、悬停缩放、进度指示或与主题联动时，伪元素方案彻底失效，必须接管滚动逻辑。
- 核心思路：隐藏原生滚动条（
overflow: hidden），用transform: translateY()或scrollTop手动控制内容位移 - 监听鼠标/触屏拖拽、滚轮、键盘方向键，实时更新
scrollTop并同步滑块位置 - 滑块高度需按比例计算：
thumbHeight = containerHeight * containerHeight / scrollHeight，注意避免小数导致渲染模糊 - 务必实现
passive: false的滚轮事件监听，否则 iOS Safari 下无法阻止默认滚动
容易被忽略的细节：focus 管理与可访问性退化
手写滚动容器后，原生的键盘导航（Tab → 元素 → 空格/方向键滚动）和屏幕阅读器语义会丢失，不是加个 tabindex="0" 就完事。
立即学习“前端免费学习笔记（深入）”；
- 滚动容器需设
role="region"和aria-label（如aria-label="主内容区域，支持上下滚动"） - 滑块元素必须有
role="slider"、aria-orientation="vertical"、aria-valuemin/aria-valuemax/aria-valuenow，且随拖拽实时更新 - 键盘操作需支持 Home/End（跳首尾）、PageUp/PageDown（翻页）、箭头（微调），并触发对应
scrollTop变更 - 别忘了
prefers-reduced-motion媒体查询下禁用滑块过渡动画，否则违反 WCAG
CSS 自定义滚动条这事，表面是样式问题，实际卡点永远在浏览器策略分歧和可访问性补全上。伪元素方案现在只剩“能看”，真要“能用”，就得准备好重写一套滚动逻辑。
