scrollbar-width是Firefox专属属性，Chrome完全不支持；Chrome需用::-webkit-scrollbar系列伪元素实现自定义，且须作用于overflow:auto/scroll的可滚动容器，并确保HTTPS或localhost环境。
scrollbar-width 在 Chrome 里根本不会生效，不是写法问题，是它压根就不被 Chromium 内核支持。
scrollbar-width 是 Firefox 专属属性
Chrome、Edge、Safari 都不识别 scrollbar-width 和 scrollbar-color。你在 DevTools 里写 scrollbar-width: thin，它会直接变灰、标为“无效属性”，控制台也不报错——浏览器解析时就跳过了。这不是漏了 selector 或拼错了单词，而是该属性不在 Blink 的 CSS 属性白名单中。
Firefox 下这套组合是标准且可靠的：scrollbar-width: thin 控制粗细，scrollbar-color: #666 #eee 控制滑块和轨道颜色。但别指望它在 Chrome 里有任何反应。
::-webkit-scrollbar 必须作用于可滚动容器
写了全套 ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb 却没效果？大概率是容器本身没“真正滚动”。
- 容器必须有明确的
height或max-height，且内容高度超出它 -
overflow-y必须是auto或scroll（overlay已废弃，别用） - 父级不能设
overflow: hidden或transform，否则滚动上下文被截断或层叠遮盖 - 本地开发时，Chrome 120+ 要求页面运行在
https://或localhost下；file://或 HTTP 页面会静默禁用所有::-webkit-scrollbar样式
::-webkit-scrollbar-thumb 不显示的常见原因
最常踩的坑：滑块明明写了 background-color，却还是透明或白色。
- 某处全局 CSS 给
::-webkit-scrollbar-thumb悄悄加了border: 1px solid white，白色边框盖住了背景色 → 必须显式写border: none -
background-color值是transparent或继承自currentColor→ 改成明确色值，如#666 - 用了
background-image却没配background-color作降级 → 浏览器可能忽略图片只留透明底 -
border-radius超过width的一半（比如width: 6px; border-radius: 4px）→ 圆角会被裁掉或失效
跨浏览器适配只能分两套写，不能混用
没有“一套 CSS 通吃”的方案。必须分开处理：
- Chrome/Edge/Safari：用
::-webkit-scrollbar系列伪元素，可控制宽高、圆角、hover 状态等细节 - Firefox：只支持
scrollbar-width: thin（不能设像素）和scrollbar-color: #666 #eee（仅双色，不支持渐变/透明） - 别用
@supports (scrollbar-width: thin)检测回退——它在 Chrome 中永远返回false，且无法触发样式切换 - 移动端 iOS Safari 基本无视
::-webkit-scrollbar；Android Chrome 仅对有效，局部容器支持极差
真正麻烦的地方不在写法，而在于：你改完 Chrome 的样式，得立刻切到 Firefox 看是否还可用；本地调试时，如果忘了开 localhost 服务，所有 WebKit 样式都会静默消失——连报错都没有，DevTools 里都找不到痕迹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
