必须对具体容器（如.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) 能强化滑块立体感，但别太重，否则在低分辨率屏上糊成一块

真正难的不是写几行 CSS，而是意识到：WebKit 和 Firefox 对“局部滚动条”的支持根本不在同一层抽象上。一个靠伪元素劫持渲染，一个连局部容器都不认——想跨浏览器一致，要么接受降级，要么引入 JS 接管。