必须对具体容器（如.chat-log）设overflow-y:auto并成套定义::-webkit-scrollbar系列伪元素才生效；Firefox不支持局部滚动条颜色定制，仅根容器响应scrollbar-color，移动端无:hover且iOS/Safari兼容性极差。
overflow-y: auto（或 scroll），再用 ::-webkit-scrollbar 系列伪元素定制——全局写 body::-webkit-scrollbar 基本无效，Safari 尤其明显。
为什么给 .chat-log 写 ::-webkit-scrollbar 才生效
浏览器只对「内容真实溢出 + 显式声明 overflow」的块级元素应用自定义滚动条。常见错误是只写 .chat-log { height: 300px; } 却漏掉 overflow-y: auto，结果样式完全不触发。
-
::-webkit-scrollbar必须成套出现：::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb缺一不可，漏一个就回退到原生样式 - 移动端没有
:hover，所以::-webkit-scrollbar-thumb:hover在手机上无效，别依赖它做主要反馈 -
border-radius超过滑块高度一半（比如滑块高 6px，设border-radius: 4px）会失效，Chrome 直接忽略该值
Firefox 下局部滚动条颜色怎么控制
Firefox 不认 ::-webkit-scrollbar，对局部容器也基本不响应 scrollbar-color —— 它只对根滚动容器（html 或显式设了 overflow 的顶级块）生效。嵌套的 .chat-log 加了 scrollbar-color 几乎没反应。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 真要 Firefox 局部生效，只能降级：放弃颜色控制，只用
scrollbar-width: thin缩小宽度 - 别写
::-moz-scrollbar，这个伪类已废弃多年，写了等于白写 - 如果设计强制要求局部滚动条在 Firefox 里也变色，就得换 JS 方案，比如
simplebar
渐变色滑块怎么写才不出错
用 linear-gradient 给 ::-webkit-scrollbar-thumb 上色没问题，但要注意两点：一是渐变方向得匹配滚动方向（垂直滚动用 to bottom 或 to top），二是背景不能透明，否则滑块会“消失”。
- 错误写法：
background: linear-gradient(to bottom, transparent, #6c5ce7)→ 滑块半透明，和轨道混在一起看不清 - 正确写法：
background: linear-gradient(to bottom, #6c5ce7, #a29bfe)，并确保::-webkit-scrollbar-track有明确background（比如#f0f0f0） - 加
box-shadow: inset 0 0 4px rgba(0,0,0,0.1)能强化滑块立体感，但别太重，否则在低分辨率屏上糊成一块
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
