Chrome/Edge支持::-webkit-scrollbar-thumb:hover，Firefox完全不支持悬停伪类，仅能通过scrollbar-color静态配色；Safari 16.4+开始支持；移动端和macOS原生滚动条不可定制，建议放弃悬停效果，优先保障可访问性与体验一致性。
Chrome/Firefox 中 ::-webkit-scrollbar-thumb 悬停变色不生效？
主流浏览器对滚动条样式的支持差异大，::-webkit-scrollbar-thumb:hover 在 Chrome/Edge 有效，但 Firefox 完全忽略该伪类——它不支持任何滚动条伪元素悬停状态。Safari 16.4+ 开始支持，但旧版仍无效。
所以直接写 ::-webkit-scrollbar-thumb:hover { background: #007bff; } 只能在部分 Chromium 内核浏览器起作用，不是跨浏览器解法。
实操建议：
- 明确目标浏览器范围：若只面向 Chrome/Edge，可放心用
::-webkit-scrollbar-thumb:hover - 若需兼容 Firefox，必须放弃纯 CSS 悬停，改用 JavaScript 监听
mouseenter/mouseleave动态切换 class - 不要尝试用
:hover作用于容器再“穿透”到滚动条——CSS 无此能力，滚动条伪元素无法被外部 :hover 触发
用 JavaScript 实现真正跨浏览器的滑块悬停变色
核心思路是监听容器的 scrollbar 区域事件，但注意：滚动条本身不可直接绑定事件。实际做法是监听容器的 mouseenter 和 mouseleave，并配合 setPointerCapture 防止鼠标快速移出时状态残留（尤其在拖拽滑块过程中）。
立即学习“前端免费学习笔记（深入）”；
示例逻辑（适用于 div 类滚动容器）：
const container = document.querySelector('.scrollable');
container.addEventListener('mouseenter', () => {
container.classList.add('scrollbar-hover');
});
container.addEventListener('mouseleave', (e) => {
// 只有当鼠标真正离开容器可视区域才移除
if (!container.contains(e.relatedTarget)) {
container.classList.remove('scrollbar-hover');
}
});
对应 CSS：
.scrollable::-webkit-scrollbar-thumb {
background: #aaa;
}
.scrollable.scrollbar-hover::-webkit-scrollbar-thumb {
background: #007bff;
}
/* Firefox 不支持伪元素 hover，但支持 class 切换后的静态样式 */
@supports (-moz-appearance: none) {
.scrollable.scrollbar-hover {
scrollbar-color: #007bff #eee;
}
}
注意：scrollbar-color 是 Firefox 唯一可控的滚动条配色属性，仅接受两个颜色值（滑块、轨道），不支持圆角或尺寸调整。
scrollbar-width 和 scrollbar-color 在 Firefox 中的限制
Firefox 的自定义能力极弱，scrollbar-width 只有 auto、thin、none 三个值，且 thin 表现因系统而异（macOS 下常被忽略）；scrollbar-color 无法响应悬停，只能做静态配色。
这意味着：在 Firefox 中，“悬停变色”本质是“进入容器时整体切换配色”，而非真正追踪滑块鼠标位置。用户如果快速进出，视觉上会有延迟感。
关键点：
-
scrollbar-color: #007bff #eee必须写在容器上，不能写在html或body上（除非你想全局改） - Firefox 不识别
::-webkit-scrollbar系列规则，加了也白加 - 没有 API 能获取当前滑块 DOM 节点，所以无法对滑块单独绑定事件
移动端和 macOS 滚动条的现实情况
iOS Safari 和 macOS Safari 默认隐藏滚动条滑块，仅在滚动时短暂显示；即使强制显示（如 overflow: scroll + -webkit-overflow-scrolling: touch），也无法通过 CSS 修改其样式或添加悬停效果。
这意味着：所谓“悬停变色”，在绝大多数移动端设备上天然不可用。强行 hack（如覆盖一层假滑块）会破坏原生滚动体验、影响可访问性，且与系统手势冲突。
建议：
- 移动端默认放弃滚动条样式定制，专注内容可读性和触控反馈
- 若必须提示“可滚动”，用底部渐变遮罩或箭头图标，比改滚动条更可靠
- macOS 下用户习惯细滚动条，强行加粗或变色反而显得违和
真正的难点不在怎么写 CSS，而在判断“这里到底值不值得加这个效果”。多数场景下，一个清晰的容器边框 + 合理的 padding，比花哨的滑块悬停更能降低用户认知负担。
