局部滚动条自定义需绑定具体可滚动元素：chrome/edge用::-webkit-scrollbar系列伪元素成套设置，firefox仅支持scrollbar-width和scrollbar-color，safari基本不可控；必须设overflow: auto/scroll且内容溢出才能触发样式生效。
局部滚动条（比如 div 容器内的滚动条）能自定义，但必须绑定到具体可滚动元素上，不能靠父级样式“继承”或“全局生效”。Chrome/Edge 可用 ::-webkit-scrollbar 系列伪元素精细控制；Firefox 仅支持 scrollbar-width 和 scrollbar-color 两个属性；Safari 基本不可控，尤其 macOS 下系统设置会覆盖 CSS。
给 div 设置 overflow 是前提，否则样式不触发
滚动条样式不会凭空出现，必须让容器真正产生滚动行为：
-
overflow-y: auto或overflow-y: scroll才会激活垂直滚动条；overflow-x同理 - 容器需有固定
height（或max-height），且内容高度超出该值，否则即使写了overflow也不会显示滚动条 - 别用
overflow: overlay—— 该值已废弃，现代浏览器忽略 - 避免在
body或html上写::-webkit-scrollbar并指望它管div：它只作用于自身触发滚动的元素
Chrome/Edge 中必须成套写 ::-webkit-scrollbar 伪元素
漏掉任意一个关键部分，整个自定义就失效，回退到默认样式：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
::-webkit-scrollbar控制宽高：width: 8px（影响垂直滚动条），height: 8px（影响水平滚动条）；建议 6–12px，太小（如 4px）会被浏览器强制加高 -
::-webkit-scrollbar-track必须设background，否则轨道透明，和页面底色混在一起；可用border-radius，但别超过宽度一半，否则视觉异常 -
::-webkit-scrollbar-thumb必须设background，否则滑块不可见；border-radius: 4px是安全值 - 悬停和点击状态要单独写：
::-webkit-scrollbar-thumb:hover、::-webkit-scrollbar-thumb:active，普通:hover不起作用
Firefox 只认 scrollbar-width 和 scrollbar-color，且仅对根级有效
这两个属性对嵌套 div 滚动容器无效，除非该 div 是直接触发滚动的“根”（即设置了 overflow 且内容溢出）：
-
scrollbar-width: thin是唯一可选的非默认值；auto和none之外的值（如10px）会被忽略 -
scrollbar-color: #666 #f5f5f5格式严格：第一个是滑块色，第二个是轨道色；顺序反了就失效 -
scrollbar-color仅在scrollbar-width: thin时生效；设为none时滚动条彻底隐藏，颜色设置被丢弃 - 不能给
.my-div::-webkit-scrollbar加scrollbar-color—— Firefox 完全不解析这种写法
Safari（macOS/iOS）基本放弃原生定制，别硬刚
Safari 16.4+ 才开始支持 scrollbar-width 和 scrollbar-color，但依然不支持 ::-webkit-scrollbar。更关键的是：
- macOS 系统偏好中若开启「自动隐藏滚动条」，所有 CSS 设置都会被无视 —— 这是系统策略，网页无权覆盖
- 即使 CSS 生效，Safari 对
scrollbar-color的渲染也常偏淡、偏细，和 Chrome 表现不一致 - 如果设计要求强一致性（比如管理后台），建议用 JS 库接管，如
simplebar或overlay-scrollbars；它们绕过原生滚动机制，统一渲染 DOM 元素模拟滚动条
最易被忽略的一点：自定义滚动条不是“加个 class 就完事”，而是必须确认该元素是否真正滚动、是否在对应浏览器中被正确识别为“可滚动容器”。很多失效案例，根源不在 CSS 写错，而在容器没溢出、没设 height、或误以为样式能跨层生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
