chrome/edge中::-webkit-scrollbar必须成套设置且显式声明width/height才生效；firefox仅支持scrollbar-width和scrollbar-color；safari基本不支持自定义滚动条，系统设置优先级更高。
Chrome/Edge里::-webkit-scrollbar必须成套写才生效
单独加::-webkit-scrollbar-thumb或只设::-webkit-scrollbar-track，样式大概率不出现——它不是“可选配”，而是整条链依赖关系。漏掉::-webkit-scrollbar自身的width（垂直滚动）或height（水平滚动），整个伪元素链就失效。
实操建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
::-webkit-scrollbar必须显式设width: 8px（推荐 6–10px），不设等于没写 -
::-webkit-scrollbar-track建议加background和border-radius，但别用box-shadow（不渲染） -
::-webkit-scrollbar-thumb的background是刚需，不设就是透明；border-radius别超滑块宽高一半，比如height: 6px时设border-radius: 4px会错位 - 悬停效果只能靠
::-webkit-scrollbar-thumb:hover单独写，对父容器加:hover没反应
Firefox只认scrollbar-width和scrollbar-color两个属性
这两个属性完全无视所有::-webkit-规则，也不支持圆角、渐变、阴影或:hover效果。更关键的是：它们只对“真正触发滚动的块级元素”生效，不是全局开关。
实操建议：
-
scrollbar-width只有三个值：auto、thin、none；没有像素控制，“thin”是唯一可调粗细的选项 -
scrollbar-color格式固定为scrollbar-color: <thumb><track></track></thumb>，顺序反了就无效；第二个参数设transparent会让轨道“消失”，但滑块还能拖——体验断裂，别这么干 - 必须搭配使用：
scrollbar-width: thin才会让scrollbar-color生效；设成none，颜色直接被忽略 - 不能写在
html或body上——除非该元素真有overflow且内容溢出；对嵌套div滚动容器无效，除非它自己满足“固定高 +overflow-y: auto”
Safari（尤其macOS/iOS）基本不支持CSS自定义滚动条
iOS Safari 16.4+ 才开始有限支持scrollbar-width和scrollbar-color，但依然不认::-webkit-scrollbar——同属 WebKit 内核却行为割裂。系统级策略更致命：macOS 若开启“自动隐藏滚动条”，所有 CSS 设置直接被无视。
实操建议：
- 别给Safari写
::-webkit-scrollbar-thumb:active，它根本不触发 - 避免依赖
scrollbar-width: thin在Safari上生效，实测多数版本直接当auto处理 -
::-webkit-scrollbar-corner和::-webkit-scrollbar-button在macOS Safari上基本被忽略 - 若需统一外观，建议用
@supports (-webkit-appearance: none)做特性检测后降级，或改用 JS 方案（如 simplebar）
局部容器自定义滚动条时样式失效的常见原因
把::-webkit-scrollbar套在.list-container下看似精准，但容易因继承链断裂、父容器overflow: hidden拦截、或未显式设置高度而塌陷。最常被忽略的是：滚动条样式不作用于html或body，只对设置了overflow且内容真正溢出的块级元素起作用。
实操建议：
- 不要直接给
body或html写::-webkit-scrollbar，改用包裹容器，例如.main-content { height: 100vh; overflow-y: auto; }，再把所有样式挂在这上面 - 检查父级是否意外设置了
overflow: hidden或display: flex未配合flex: 1，导致子容器高度计算失败 - 用开发者工具检查目标元素的
Computed Height和Overflow，临时加border: 2px solid red确认渲染尺寸 - 移动端需加
touch-action: pan-y确保手势滚动不被拦截
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
