scrollbar-width仅对firefox有效，只接受auto/thin/none三值，不能设像素、变量或透明色；chrome/edge完全忽略它，需用::-webkit-scrollbar控制宽度。
scrollbar-width 不是“打造个性化滚动条”的万能开关，它只控制粗细档位，不能设像素值、不支持变量或透明色，且仅对 Firefox 有效 —— Chrome/Edge 完全无视它。
scrollbar-width 只接受三个固定关键字
写 scrollbar-width: thin 或 scrollbar-width: none 或 scrollbar-width: auto 才生效；其他任何值（比如 scrollbar-width: 6px、scrollbar-width: medium）整条声明会被浏览器静默丢弃，回退到 auto。
-
auto：按系统默认宽度（Windows 上通常较宽，macOS 上常为悬停显示） -
thin：Firefox 中强制启用窄滚动条（但具体像素不可控，也受系统主题影响） -
none：隐藏滚动条，内容仍可滚动（注意：键盘和触控板仍可用，但用户可能找不到滚动入口）
为什么 scrollbar-width 写在 body 上却没效果
因为该属性**必须作用于实际发生滚动的容器本身**，且该容器需有明确溢出行为（如 overflow-y: auto）。它不继承，也不响应伪元素。
- 错误：在
body上写scrollbar-width，但滚动发生在.main-content→ 无效 - 错误：写在
.main-content::-webkit-scrollbar里 → 浏览器直接忽略（伪元素不支持该属性） - 正确：定位到真实滚动容器，例如：
.chat-log，并确保它有height或max-height+overflow-y: auto
Chrome/Edge 中 scrollbar-width: thin 完全不生效
这是设计使然：Chrome 和 Edge（v120+）虽解析该属性，但**不实现其视觉效果**。它们只认 ::-webkit-scrollbar 系列规则。
-
scrollbar-width: thin在 Chrome 中无任何作用，滚动条宽度完全由::-webkit-scrollbar { width: 8px }控制 - 想让 Chrome 滚动条变细，必须显式写：
.container::-webkit-scrollbar { width: 8px } - Firefox 则完全不支持
::-webkit-scrollbar，只响应scrollbar-width和scrollbar-color
scrollbar-color 的颜色限制很硬
scrollbar-color 只接受两个标准 <color></color> 值，顺序为 thumb track（滑块色、轨道色），其余全部被丢弃。
- 支持：
scrollbar-color: #4a90e2 #f5f5f5、scrollbar-color: rgb(74, 144, 226) hsl(210, 70%, 60%) - 不支持：
scrollbar-color: var(--thumb) var(--track)（所有浏览器静默失效） - 不支持：
scrollbar-color: #4a90e2 transparent（transparent被当作无效值，轨道色回退为系统默认灰） - 不支持：
scrollbar-color: rgba(74, 144, 226, 0.8) #f5f5f5（alpha 通道被忽略，等效于rgb(74, 144, 226)）
scrollbar-width + scrollbar-color，WebKit 引擎浏览器用 ::-webkit-scrollbar 系列伪元素 —— 且二者必须写在同一选择器下，否则容易漏掉某一边。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
