因为浏览器只对实际触发滚动的块级元素处理::-webkit-scrollbar，body未满足overflow+内容溢出条件，且该伪元素不继承、不作用于根元素；必须绑定到具体容器如.list-container，并配齐track、thumb等子伪类，同时确保其有固定高度和真实滚动行为。
为什么给 body 写 ::-webkit-scrollbar 没反应
不是你写错了，是浏览器根本不处理——::-webkit-scrollbar 只对「实际触发滚动的块级元素」生效，且该元素必须同时满足两个条件：明确设置了 overflow: auto 或 scroll，且子内容真实溢出。直接挂在 html 或 body 上，等于对一个不滚动的容器下指令，样式被忽略。
常见错误包括：
- 只写了
::-webkit-scrollbar，漏掉::-webkit-scrollbar-track或::-webkit-scrollbar-thumb，整套规则失效 - 容器没设固定高度/宽度，内容没溢出，伪元素压根不渲染
- 用了
overflow: overlay（已废弃），导致滚动条行为异常
.list-container 这类自定义容器怎么写才生效
必须把所有滚动条样式绑定到目标容器选择器上，比如 .list-container、.chat-log，而不是全局或父级。同时确保它具备可滚动条件。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 容器需显式设置
height或max-height+overflow-y: auto -
::-webkit-scrollbar必须带宽高：width: 8px（垂直）或height: 8px（水平），值太小（如4px）会被浏览器强制拉高 -
::-webkit-scrollbar-track必须设background，否则轨道透明；border-radius别超一半宽度，否则视觉错位 -
::-webkit-scrollbar-thumb同样必须设background，否则滑块不可见；悬停效果只能用::-webkit-scrollbar-thumb:hover单独写
Firefox 怎么让 scrollbar-color 生效
Firefox 完全无视 ::-webkit- 系列，只认 scrollbar-width 和 scrollbar-color，而且这两个属性必须写在「实际滚动的容器规则块内」，不能塞进伪元素里，也不能靠继承。
关键限制：
-
scrollbar-width只接受auto、thin、none—— 写6px或thick直接被忽略 -
scrollbar-color格式严格：scrollbar-color: #666 #f5f5f5，顺序反了（比如先轨道后滑块）就失效 - 第二个参数（轨道色）别设
transparent，会导致轨道“消失”，但滑块还在，用户拖动时失去参照 - 这两个属性对嵌套滚动容器有效，但对
html或body根元素无效，除非该元素本身是滚动源
Safari 和移动端的现实约束
iOS Safari 16.4+ 才开始有限支持 ::-webkit-scrollbar，macOS Safari 基本忽略 ::-webkit-scrollbar-button 和 ::-webkit-scrollbar-corner，且 :hover、:active 多数版本不触发。
这意味着：
- 别给
::-webkit-scrollbar-thumb加transition动画，Safari 不渲染 -
scrollbar-width: thin在 Safari 上大概率当auto处理，别依赖它变窄 - 如果设计稿要求圆角 + 悬停变色 + 全平台稳定响应，原生 CSS 已到能力边界，JS 库（如
simplebar）是唯一可靠路径
最易被忽略的是：深色模式下不能只靠 @media (prefers-color-scheme: dark) 包一层，得为每个容器单独写两套颜色规则，并通过类名切换控制。
