scrollbar-color仅对firefox有效且须作用于html或body，语法为scrollbar-color: #6c757d #e9ecef;需配合scrollbar-width；webkit系浏览器须用::-webkit-scrollbar整套伪元素声明，ios/android移动端支持极差。
直接改滚动条颜色，scrollbar-color 最省事，但只对 Firefox 有效；WebKit 系列（Chrome/Edge/Safari）必须用 ::-webkit-scrollbar 伪元素组合，漏一个就白写。
scrollbar-color 在 Firefox 里怎么写才生效
它只作用于 html 或 body 元素，其他容器无效。语法是 scrollbar-color: <thumb><track>;</track></thumb>，两个颜色缺一不可：
-
scrollbar-color: #6c757d #e9ecef;—— 第一个是滑块色，第二个是轨道色 - 必须配合
scrollbar-width: thin | auto | none才有实际效果，单独写scrollbar-color不会改变宽度 - Firefox 64+ 才支持，老版本静默忽略，不报错也不回退提示
- macOS 上
thin只在“自动隐藏滚动条”开启时才真正变窄，Windows 下多数被系统无视
::-webkit-scrollbar 必须成套声明，否则没反应
单写 ::-webkit-scrollbar { width: 8px; } 不会改变滑块或轨道颜色，只是设了宽度容器。真正起作用的是它的子伪元素：
-
::-webkit-scrollbar：必须设width（垂直）或height（水平），单位只能是px或rem -
::-webkit-scrollbar-track：轨道背景，别加border或padding，容易遮挡滑块 -
::-webkit-scrollbar-thumb：滑块必须设background-color，否则透明不可见 -
::-webkit-scrollbar-corner：右下角交汇处，常设background: transparent避免白块
常见错误：只写了 thumb 没写 track，结果滑块颜色变了但轨道还是默认灰，视觉割裂。
为什么加了样式滚动条还是原样
不是代码写错，大概率是选择器没命中或滚动行为未触发：
- 目标元素没设
overflow: auto或overflow-y: scroll，仅靠内容溢出不会激活伪元素 - 父容器没固定高度（
height或max-height），子内容再长也无滚动条 - 写了
body::-webkit-scrollbar，但 Safari 会忽略，建议套一层div容器控制 - CSS 权重不够，被 Bootstrap 或其他框架规则覆盖，优先用带类名的选择器如
.table-responsive::-webkit-scrollbar - 用了
overflow: hidden后再想加滚动条样式？不可能，滚动条已被隐藏
iOS Safari 和 Android Chrome 的兼容性现实
别在移动端强求自定义滚动条：
- iOS Safari 直到 iOS 16.4 才部分支持
::-webkit-scrollbar，且仅限overflow: scroll的容器，body和html仍无视 - 更关键的是：iOS 默认隐藏滚动条，只在用户正在滚动时短暂浮现——你写的
thumb样式根本没机会渲染出来 - Android Chrome 从 v80+ 起逐步移除支持，真机上基本退回系统默认样式
- 检测 iOS Safari 可用
@supports (-webkit-touch-callout: none) and (not (-webkit-scrollbar: none))，匹配后直接跳过注入
真正需要提示可滚动时，用 overscroll-behavior: contain 加底部阴影或下拉动画，比硬套滚动条样式靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
