chrome不支持scrollbar-width和scrollbar-color，仅识别::-webkit-scrollbar系列伪元素；需定义::-webkit-scrollbar容器、设置溢出高度、避免直接作用于body，并注意https/localhost限制及ios兼容性。
Chrome 里写 scrollbar-width 或 scrollbar-color 根本不会生效——它压根不认这两个属性，不是你漏写了，是浏览器直接忽略。
Chrome 只认 ::-webkit-scrollbar 系列伪元素
Firefox 用 scrollbar-width 和 scrollbar-color 就能搞定；Chrome、Edge、新版 Safari 必须走另一套：用 ::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track 手动控制。单独写 ::-webkit-scrollbar-thumb 不起作用，必须配上 ::-webkit-scrollbar 容器声明（哪怕只设 width）。
-
::-webkit-scrollbar必须定义，否则整个伪元素链不触发渲染 - 目标元素得有明确的
height或max-height，且overflow-y: auto或scroll生效，内容真溢出才行 - 别对
body直接写——部分 Chrome 版本下失效，套一层<div class="scroll-container"> 更稳 <li>旧版 Safari 对 <code>border-radius和opacity支持差，优先用background-color+border: none - 圆角别设太大——如果
width: 6px，border-radius: 8px会被截断，建议 ≤width / 2 -
padding、margin、display在 thumb 上无效，别白费劲 - 背景推荐
linear-gradient，比纯色或rgba()更兼容（某些 Chromium 版本对半透渲染异常） - 触摸设备不响应 hover/active，这属于设计限制，不是 bug
- 开发时务必用
localhost:xxxx启服务，比如npx serve、vite preview、webpack-dev-server - 生产环境部署必须走 HTTPS，HTTP 域名下同样不生效
- iOS Safari 自 16.4 起才部分支持，且滚动条默认隐藏——用户不滚动时根本看不到你的样式
::-webkit-scrollbar-thumb hover 和 active 怎么写才有效
::-webkit-scrollbar-thumb:hover 和 ::-webkit-scrollbar-thumb:active 是支持的，但有硬性前提：基础样式必须先定义，且状态选择器要写在后面；不能省略前缀，也不能写成 :hover 这种简写。
本地开发时样式突然消失？检查是否 HTTPS 或 localhost
Chrome 120+ 开始强制要求：只有 HTTPS 或 localhost 下，::-webkit-scrollbar 才会加载。双击打开 HTML 文件（file://）、用 python -m http.server 起的 HTTP 服务，都会静默失效——DevTools 里连规则都不显示，控制台也无报错。
最常被忽略的是滚动上下文：没溢出、没高度、父级 overflow: hidden 或 transform，都会让伪元素“存在但不可见”。别急着调颜色，先确认容器真正在滚动。
