局部滚动条样式生效需四重条件：容器须显式设overflow-y:auto、为有宽高的块级元素、样式绑定在该容器上，且浏览器支持并绕过系统设置。
局部滚动条（比如 .chat-log、.modal-body 这类容器）能改样式，但必须满足三个硬条件：容器显式设了 overflow-y: auto（或 scroll），是块级元素且有宽高约束，样式规则必须绑定在该容器上——写在 body 或 html 上基本没用。
为什么 ::-webkit-scrollbar 写在 class 上才生效
浏览器只对「实际触发滚动的块级容器」应用该伪元素。它不继承、不全局作用，也不响应 display: inline 或未设 height 的 div。
-
::-webkit-scrollbar必须成套出现：::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb缺一不可；漏掉任意一个，Chrome/Edge 就回退到原生样式 -
::-webkit-scrollbar自身必须设width（垂直滚动）或height（水平滚动），常见值为8px～12px；设成4px可能被浏览器强制拉高，设为0或不写则整套失效 - 轨道（
::-webkit-scrollbar-track）必须设background，否则透明，和页面底色打架；border-radius可加，但别超宽度一半（例如宽 8px，border-radius: 5px就会错位） - 滑块（
::-webkit-scrollbar-thumb）同理必须设background，否则不可见；悬停效果只能靠::-webkit-scrollbar-thumb:hover单独写，不能靠父容器:hover触发
::-webkit-scrollbar 各部件作用与常用参数
每个伪元素控制滚动条不同物理部分，参数含义严格对应方向：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
::-webkit-scrollbar：整体占位框，垂直滚动时只认width，水平滚动时只认height -
::-webkit-scrollbar-track：轨道背景区域，支持background、border-radius，但box-shadow不渲染 -
::-webkit-scrollbar-thumb：可拖动滑块，支持background、border-radius、border；border-radius别超滑块自身宽高一半 -
::-webkit-scrollbar-button和::-webkit-scrollbar-corner在 macOS/iOS Safari 中基本被忽略，不建议依赖
Firefox 怎么配局部滚动条颜色
Firefox 完全无视所有 ::-webkit- 伪类，只响应两个属性，且仅对「设置了 overflow 的块级容器」本身生效：
-
scrollbar-width只接受auto、thin、none；设成12px或thick会被静默忽略 -
scrollbar-color格式固定为scrollbar-color: <thumb><track></track></thumb>，顺序反了（如scrollbar-color: #eee #666）就完全不生效 - 第二个参数（
<track></track>）别用transparent，否则轨道视觉消失，用户找不到拖拽位置 - 这两个属性不支持
border-radius、transition、:hover，也没法改阴影或渐变
真正容易被忽略的是：Safari（尤其是 macOS）会优先服从系统设置——如果用户开了「自动隐藏滚动条」，哪怕你写了全套 CSS，它也直接不显示；而且 Safari 16.4+ 才开始有限支持 scrollbar-width 和 scrollbar-color，依然不认 ::-webkit-scrollbar。所以局部滚动条样式不是“写了就能看见”，而是“写了 + 容器达标 + 浏览器支持 + 系统没拦截”四者同时成立才行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
