scrollbar-width仅支持auto/thin/none三个关键字值，写8px或medium会被浏览器忽略并回退auto；它不是长度单位而是行为开关，需作用于带overflow的可滚动容器，且firefox与chrome/edge对thin的实现不一致。
scrollbar-width 只能设 auto/thin/none，不能写 8px
写了 scrollbar-width: 8px 或 scrollbar-width: medium，整条声明会被浏览器直接忽略，回退到 auto。这不是浏览器 bug，而是规范明确限定：它不是长度单位，而是行为开关——auto（系统默认）、thin（窄样式触发）、none（视觉隐藏）。Firefox 会真正变窄，Chrome/Edge 则只把 thin 当作启用信号，实际宽度仍由 OS 和 WebKit 规则决定。
必须作用于可滚动容器，且配 overflow
scrollbar-width 不生效，90% 是因为写错了地方或缺必要条件：
- 属性必须写在**实际发生滚动的元素上**，比如
.chat-log、.sidebar，而不是body（除非整页滚动） - 该元素必须显式设置
overflow-y: auto或overflow-x: auto，否则滚动未触发，属性无生效前提 - 内容高度/宽度未超出容器，也不会渲染滚动条，样式自然不生效
Firefox 和 Chrome 的 thin 表现完全不同
想靠 scrollbar-width: thin 实现跨浏览器统一宽度，会失望：
- Firefox：直接应用“窄样式”，宽度约 6–8px，稳定可靠
- Chrome/Edge：仅把
thin当作兜底开关，真正起效的是::-webkit-scrollbar { width: 6px }，且需配合::-webkit-scrollbar-thumb { width: 6px } - 横向滚动条更麻烦：
scrollbar-width: thin在 Firefox 中对overflow-x容器常被忽略；Chrome/Edge 下得用::-webkit-scrollbar { height: 6px }控制厚度
scrollbar-color 必须和 scrollbar-width 写在同一规则块里
单独写 scrollbar-width: thin 没问题，但若想同时换色，顺序和共存是硬性要求：
-
scrollbar-color必须紧跟着scrollbar-width出现在同一 CSS 规则中，不能拆开写 - 值顺序固定：
scrollbar-color: #4a90e2 #f5f5f5→ 第一个是 thumb 色，第二个是 track 色 -
scrollbar-color不支持rgba()、渐变、transparent；var(--x)在 Chrome/Edge v120+ 才支持，Firefox 一直支持变量
::-webkit-scrollbar 精确控制 Chrome/Safari/Edge，用 scrollbar-width + scrollbar-color 做 Firefox 降级，别指望单个属性覆盖所有场景。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
