Chrome/Edge 用 ::-webkit-scrollbar 修改主滚动条需作用于 html 或 body，核心为 ::-webkit-scrollbar（宽高）、::-webkit-scrollbar-thumb（拖动块颜色）、::-webkit-scrollbar-track（轨道底色）；Firefox 仅支持有限的 scrollbar-color，跨浏览器统一效果应使用 simplebar。
Chrome/Edge 用 ::-webkit-scrollbar 改主滚动条颜色最直接
只改页面右侧那个主滚动条，不是某个 <div> 里的局部滚动条，就该冲着 html 或 body 下的伪元素去写。核心是三个部分：::-webkit-scrollbar（控制宽高）、::-webkit-scrollbar-thumb（拖动块，改颜色就改它）、::-webkit-scrollbar-track（轨道底色）。
常见错误：把样式写在 div 上却想影响整个页面滚动条；或者漏掉 ::-webkit-scrollbar 的 width，结果滚动条根本不显示。
-
::-webkit-scrollbar-thumb的border-radius别超过它自身高度的一半，比如高度是8px，border-radius: 6px就会失效 - 移动端没
:hover，所以::-webkit-scrollbar-thumb:hover在手机上不触发 - 如果页面有横向滚动，
::-webkit-scrollbar要同时设width和height，否则横滚条可能不生效
Firefox 滚动条颜色基本不能靠 CSS 精确控制
别试 ::-moz-scrollbar —— 这个伪类早就被废弃了，写了也白写。Firefox 目前唯一能用的原生属性是 scrollbar-color，但它只接受两个值或一组配对颜色：
-
scrollbar-color: auto（系统默认） -
scrollbar-color: dark或light（仅提示浏览器倾向） -
scrollbar-color: #6c5ce7 #f0f0f0（thumb + track 颜色，但实际渲染取决于系统主题和 DPI 缩放，经常“看起来不像你写的”）
它不支持圆角、渐变、边框、阴影，也不响应 :hover。如果你在 Firefox 里看到滚动条“变色”，八成是 Windows 暗色模式或 macOS 高对比度设置透出来的，不是你的 CSS 生效了。
立即学习“前端免费学习笔记（深入）”；
需要跨浏览器统一效果？用 simplebar 接管滚动逻辑
当设计稿明确要求“所有浏览器滚动条都必须是紫色圆角+悬停加深”，那就得放弃原生滚动条。JS 库 simplebar 是目前最轻量靠谱的选择（gzip 后约 3.5KB，无依赖）。
- 它会隐藏原生滚动条，用绝对定位的
<div>模拟 thumb 和 track，完全受 CSS 控制 - 自动处理 RTL 文本方向、触摸拖拽、macOS 惯性滚动等细节
- 注意：启用后，原生
scrollTop、scrollHeight仍可用，但监听scroll事件要换成simplebar提供的 API
别指望用 overflow: overlay 或其他 CSS 技巧绕过——这个值早已被 Chrome 废弃，现代浏览器不认。
渐变色或随系统主题切换？只在 WebKit 内核里做
滚动条渐变只能靠 background: linear-gradient() 塞进 ::-webkit-scrollbar-thumb，比如 background: linear-gradient(to bottom, #ff6b6b, #5f27cd)。Firefox 不吃这套，Safari 对 linear-gradient 支持也不稳定。
想随系统深色/浅色模式切换，用 @media (prefers-color-scheme: dark) 包一层，分别写两套 ::-webkit-scrollbar 样式。但要注意：
-
prefers-color-scheme在 Firefox 中支持有限，且不触发滚动条重绘，有时切主题后得手动滚动一下才生效 - 不要在媒体查询里重复写
::-webkit-scrollbar宽高，只覆盖颜色和背景相关属性，避免冗余
真正难的从来不是“怎么写”，而是判断清楚：这个需求到底要不要在 Firefox 里一模一样？如果答案是“要”，那从一开始就不该碰原生伪元素。
