CSS 的 ::-webkit-scrollbar 伪类可自定义 WebKit 内核浏览器滚动条外观，含 scrollbar、track、thumb 等五个关键部分，支持深浅色模式适配，但 Firefox 和移动端 Safari 兼容有限。
滚动条确实容易破坏整体设计感，但用 CSS 的 ::-webkit-scrollbar 伪类可以完全自定义它的外观——只对 WebKit 内核（Chrome、Edge、Safari）生效，Firefox 和旧版 IE 不支持，不过现代项目中已足够常用。
基础结构：五个关键伪元素
WebKit 滚动条由多个可单独控制的部分组成，常用的是这五个：
-
::-webkit-scrollbar：整个滚动条容器（设宽高） -
::-webkit-scrollbar-track：滚动轨道（背景部分） -
::-webkit-scrollbar-thumb：拖动滑块（用户能拖的那部分） -
::-webkit-scrollbar-thumb:hover：滑块悬停态（增强交互反馈） -
::-webkit-scrollbar-corner：横竖滚动条交汇处（比如右下角小方块）
简洁实用的自定义写法
下面是一段干净、适配深浅色模式、不抢眼又易识别的滚动条样式：
/* 整体宽度 */
::-webkit-scrollbar {
width: 8px;
}
/ 轨道 /
::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 4px;
}
/ 滑块 /
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
/ 悬停时更明显 /
::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}
/ 角落隐藏（避免双滚动条交叉难看） /
::-webkit-scrollbar-corner {
background: transparent;
}
如果页面支持暗色模式，可配合 @media (prefers-color-scheme: dark) 调整轨道和滑块颜色，比如把 #f5f5f5 换成 #2d2d2d，#c1c1c1 换成 #666。
立即学习“前端免费学习笔记（深入）”；
注意事项与兼容提醒
这个方案不是万能的：
- Firefox 使用
scrollbar-width和scrollbar-color，只能控制粗细和颜色，不能做圆角或阴影等精细样式 - 想全浏览器统一？得用 JS 库（如 SimpleBar、OverlayScrollbars），但会增加体积和复杂度
- 移动端 Safari 对
::-webkit-scrollbar支持有限，部分 iOS 版本会忽略自定义，实际以原生为准 - 别把滑块设得太细（比如
width: 4px），影响触控/鼠标精度；也别用透明色，否则用户找不到滚动条
基本上就这些。不复杂但容易忽略细节，调好后滚动条就能安静地服务设计，而不是跳出来抢戏。
