局部滚动条样式需绑定具体容器，webkit用::-webkit-scrollbar伪元素，firefox用scrollbar-width和scrollbar-color；容器必须设overflow及明确高度才能触发滚动条显示。
局部滚动条样式不能靠全局设置，必须绑定到具体容器上，且 WebKit 和 Firefox 的写法完全不同，混用会导致部分浏览器完全失效。
给容器加 overflow 才能触发滚动条
没有溢出就不会出现滚动条，样式再全也白搭。关键不是“怎么改”，而是“先让它出来”。
-
overflow-y: auto最安全：内容超长才显示，不干扰布局 -
overflow-y: scroll强制显示（含空轨道），适合需要视觉一致性的地方（比如固定高度的聊天窗口） - 别只写
overflow: auto—— 它同时控制 x/y，可能意外激活水平滚动条 - 容器必须有明确的
height或max-height，百分比高度在无父级高度时无效
::-webkit-scrollbar 伪元素必须挂载到容器选择器下
直接写 ::-webkit-scrollbar 是全局生效，想只改某个 div，就得带前缀，比如 .chat-panel::-webkit-scrollbar。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 宽度设太小（如
width: 2px）在 macOS 上可能被系统强制撑开，建议最低用6px -
::-webkit-scrollbar-thumb推荐加background-clip: content-box，否则圆角+边框容易错位 - 悬停效果用
::-webkit-scrollbar-thumb:hover，但 iOS Safari 不支持 hover，别依赖它做核心交互反馈 - 不要在伪元素里写
display、position或动画，这些属性被忽略
Firefox 兼容靠 scrollbar-width 和 scrollbar-color
Firefox 完全不认 ::-webkit-scrollbar，但支持两个标准属性，仅限于基础控制。
-
scrollbar-width: thin | auto | none—— 只能选三种宽度，不能设像素值 -
scrollbar-color: <thumb-color><track-color></track-color></thumb-color>—— 顺序不能反，第二个是轨道色，不是背景色 - 这两个属性必须和
overflow写在同一个选择器里，单独提出来无效 - 它们对 WebKit 浏览器是无害的，可以放心共存，无需
@supports包裹
移动端和深色模式下的隐藏陷阱
看似生效的样式，在 iPhone 或深色模式下可能突然“消失”，不是代码错了，是系统干预了。
- iOS Safari 默认隐藏滚动条，滑动时才淡入，
::-webkit-scrollbar只能改它出现时的样式，不能强制常驻 - 深色模式下，若
scrollbar-color用了硬编码色值（如#000），可能和系统轨道色撞车变不可见，建议用color-scheme: light dark配合prefers-color-scheme媒体查询 - 某些安卓 WebView 会忽略
border-radius，滑块仍是直角，测试时务必真机验证 - 如果容器用了
transform或will-change，滚动条可能渲染异常，临时去掉它们排查
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
