CSS伪元素实现自定义滚动条轨道与滑块的视觉风格

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 自定义滚动条这事，表面是样式问题，实际卡点永远在浏览器策略分歧和可访问性补全上。伪元素方案现在只剩“能看”，真要“能用”，就得准备好重写一套滚动逻辑。