scrollbar-width仅支持auto、thin、none三个关键字，不接受长度值或medium等非标准值；它作用于可滚动容器且需配合overflow使用，firefox支持其效果，chrome/edge需搭配::-webkit-scrollbar才能生效。
scrollbar-width 不是用来“自定义粗细”的，它只提供三个开关值：auto、thin、none —— 写 scrollbar-width: 8px 或 scrollbar-width: medium 会被整条忽略，回退到 auto。
scrollbar-width 只接受关键字，不支持长度单位
这是最常踩的坑：以为它是类似 width 的数值型属性。实际上规范明确限定它是个行为描述词，不是尺寸控制符。thin 不等于 “6px”，而是告诉浏览器“启用窄样式模式”；none 是隐藏视觉滚动条但保留滚动能力；auto 就是交由系统决定。
- 写
scrollbar-width: 10px→ 浏览器静默丢弃该声明，用默认宽度 - 写
scrollbar-width: thin→ Firefox 真变窄；Chrome/Edge 仅作为信号，需额外配::-webkit-scrollbar { width: 6px }才生效 - 写
scrollbar-width: none→ 滚动条消失，但scrollTop、键盘方向键、触控拖拽仍正常工作
必须作用于实际可滚动容器，且要有 overflow
属性不会继承，也不响应伪元素，只对“自身发生滚动”的元素起效。比如你给 .chat-list 设了 height: 300px; overflow-y: auto，那 scrollbar-width 就得写在 .chat-list 上，而不是它的父容器或 body。
- 错误写法：
body { scrollbar-width: thin; }→ 整页滚动时可能生效，但局部容器滚动完全无效 - 正确写法：
.sidebar { height: 400px; overflow-y: auto; scrollbar-width: thin; } - 漏掉
overflow→ 即使写了scrollbar-width，浏览器认为“无需滚动”，直接忽略
Firefox 和 Chrome/Edge 的行为差异极大
Firefox 完全靠 scrollbar-width + scrollbar-color 实现基础控制；Chrome/Edge 则几乎无视 scrollbar-width 的像素效果，必须用 ::-webkit-scrollbar 精确设置 width（纵向）或 height（横向）。
- Firefox 中
scrollbar-width: thin能稳定压窄，scrollbar-color: #4a90e2 #f5f5f5同时生效 - Chrome/Edge 中单独写
scrollbar-width: thin不会改变像素宽度，必须补上：::-webkit-scrollbar { width: 6px; } - 横向滚动条（
overflow-x）在 Firefox 中scrollbar-width: thin常被忽略，Chrome/Edge 则要用::-webkit-scrollbar { height: 6px; }
scrollbar-color 必须和 scrollbar-width 在同一规则块里
想让滚动条既变细又换色，两个属性必须写在一起，顺序不能颠倒：scrollbar-color 第一个值是滑块（thumb），第二个是轨道（track）。而且它不支持 rgba()、渐变、transparent 或 CSS 变量（Chrome/Edge v120+ 开始支持变量，但 Firefox 一直不认）。
- 有效写法：
.log-view { scrollbar-width: thin; scrollbar-color: #3b82f6 #e5e7eb; } - 无效写法：
scrollbar-color: var(--thumb) var(--track)→ 静默失效 - 无效写法：
scrollbar-color: #666 transparent→transparent被丢弃，轨道回退为默认灰
真正可控的方案从来不是单靠 scrollbar-width，而是分层处理：用 ::-webkit-scrollbar 控制 WebKit 系浏览器的像素级表现，用 scrollbar-width + scrollbar-color 做 Firefox 降级，别指望一个属性跨浏览器统一粗细。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
