chrome不支持scrollbar-width和scrollbar-color，必须使用::-webkit-scrollbar系列伪元素；需成套声明、作用于真实可滚动容器、满足height/max-height+overflow条件，并在https或localhost环境下运行。
Chrome根本不认scrollbar-width，得换一套写法
Chrome、Edge、Safari 完全不解析 scrollbar-width 和 scrollbar-color，写了也不会报错，但 DevTools 里直接标灰、显示“无效属性”。这不是你写错了 selector 或拼错了单词，是 Blink 内核压根没实现这两个属性。Firefox 下靠 scrollbar-width: thin 能稳定变窄，Chrome 里它连当个开关都不行——必须切到 ::-webkit-scrollbar 系列伪元素。
::-webkit-scrollbar 必须成套声明，漏一个就全失效
只写 ::-webkit-scrollbar-thumb 或只设 background 是最常见的失效原因。WebKit 浏览器要求整条链完整：
-
::-webkit-scrollbar必须显式声明width（垂直滚动）或height（横向滚动），不能省略；值建议 ≥ 6px，width: 0可用于隐藏 -
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb都要单独定义，哪怕只是background: transparent - 所有规则必须作用于**实际触发滚动的容器本身**，比如
.chat-log::-webkit-scrollbar，而不是父级或body - 容器需满足：有
height或max-height、overflow-y: auto、内容真实溢出（scrollHeight > clientHeight）
Chrome 120+ 开始强制 HTTPS/localhost，file:// 直接静默丢弃样式
本地开发时用 file:// 协议，或 HTTP 页面（比如 http://localhost:3000 没配 HTTPS），Chrome 120+ 会直接跳过所有 ::-webkit-scrollbar 样式，控制台无任何提示。现象就是：Firefox 正常，Chrome 滚动条还是系统默认样式。
- 解决办法只有两个：
https://域名部署，或用localhost（注意不是127.0.0.1，某些版本对后者也不认） - 开发阶段可用
npx serve、python -m http.server或 VS Code Live Server 插件起本地服务 - 别指望
display: none或opacity: 0替代width: 0—— 在 macOS Safari 15 前和部分 Chrome 版本中会导致滚动失效
Firefox 和 Chrome 的 “thin” 表现本质不同，别混用逻辑
写 scrollbar-width: thin 在 Firefox 中真能压到约 6–8px；但在 Chrome 里它只是个摆设，真正起效的是 ::-webkit-scrollbar { width: 6px }。更麻烦的是：
- 横向滚动条：Firefox 对
scrollbar-width: thin在overflow-x容器中常忽略；Chrome 则必须用::-webkit-scrollbar { height: 6px }控制厚度 - 颜色：Firefox 的
scrollbar-color: #4a90e2 #f5f5f5顺序固定（滑块+轨道），不支持transparent或rgba()；Chrome 里这些值全无效，只能靠::-webkit-scrollbar-thumb { background: #4a90e2 }单独设 - 圆角限制：若
width: 6px，border-radius: 4px会被裁掉，建议 ≤width / 2
scrollbar-width+scrollbar-color，Chrome/Edge/Safari 用 ::-webkit-scrollbar 全链声明，且必须确保运行环境符合协议要求。最容易被忽略的其实是本地开发时的协议限制——查半天样式，最后发现只是少起了个本地服务。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
