滚动条加粗只能通过 CSS 自定义，原生滚动条不支持 hover 动态调整宽度；需用父容器 :hover 触发 ::-webkit-scrollbar 宽度变化，Firefox 不支持该伪元素，仅 WebKit 内核有效。
滚动条加粗只能通过 CSS 自定义，原生滚动条不支持 hover 动态调整宽度
浏览器默认滚动条无法用 :hover 直接控制宽度——::-webkit-scrollbar 伪元素本身不响应鼠标事件，所有样式必须静态声明。所谓“移入加粗”，本质是用 :hover 触发容器状态变更，再联动滚动条样式。
必须用父容器 :hover + 滚动条选择器组合生效
核心思路：给可滚动容器（如 <div class="scrollable">）加 :hover，再在其内部用后代选择器控制 ::-webkit-scrollbar 的 width 或 height。Firefox 不支持该伪元素，仅适用于 Chrome、Edge、Safari。
-
.scrollable:hover::-webkit-scrollbar是有效写法；.scrollable::-webkit-scrollbar:hover无效 - 需同时设置非 hover 状态的默认宽度，否则未悬停时可能退化为系统默认（通常 12px–17px，不可控）
- 滚动条轨道（
::-webkit-scrollbar-track）和滑块（::-webkit-scrollbar-thumb）也需同步调整尺寸，否则滑块会溢出或错位
完整可运行的 CSS 示例（含 fallback）
.scrollable {
overflow-y: auto;
max-height: 200px;
/* 默认滚动条宽度 */
scrollbar-width: thin; /* Firefox */
}
.scrollable::-webkit-scrollbar {
width: 8px;
}
.scrollable::-webkit-scrollbar-track {
background: #f1f1f1;
}
.scrollable::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
/* 鼠标移入时加粗 */
.scrollable:hover::-webkit-scrollbar {
width: 14px;
}
.scrollable:hover::-webkit-scrollbar-thumb {
background: #a0a0a0;
}
/* Firefox 的 hover 模拟（仅 thin/none，无法精确控制宽度） */
.scrollable:hover {
scrollbar-width: auto; /* 或 thin，但无加粗效果 */
}注意：scrollbar-width: auto 在 Firefox 中只是恢复系统默认宽度，无法实现“加粗”；真正可控的 hover 加粗仅限 WebKit 内核。
容易被忽略的兼容性与体验细节
滚动条 hover 效果在触摸设备上无意义，且 Safari 对 ::-webkit-scrollbar 支持不稳定（例如 macOS Safari 16+ 需要 overflow: overlay 才显示自定义样式，而该值已被废弃）。
立即学习“前端免费学习笔记（深入）”；
- 移动端 Safari 完全忽略
::-webkit-scrollbar，不要依赖它做关键 UI - 加粗后若未重设
::-webkit-scrollbar-thumb的border-radius，圆角可能显得过小，视觉突兀 - 动画过渡（
transition: width 0.2s）对::-webkit-scrollbar无效，宽度变化是瞬时的
真正在意跨平台一致性的场景，建议放弃原生滚动条定制，改用 simplebar 或 overlay-scrollbars 这类 JS 方案——它们把滚动条渲染为 DOM 元素，才能真正响应 :hover 和 transition。
