弹窗滚动条样式必须作用于实际触发滚动的容器（如.modal-content），成套声明::-webkit-scrollbar系列伪元素并设width，firefox需单独用scrollbar-width和scrollbar-color，且ios safari完全不支持自定义。
弹窗（modal）内的滚动条样式不能靠全局规则生效，必须显式限定作用域、成套声明伪元素、并为 Firefox 单独兜底；否则 Chrome 下不显示、Firefox 下无反应、Safari 下直接忽略。
为什么弹窗滚动条样式经常失效
常见错误是把 ::-webkit-scrollbar 规则写在 html 或 body 上，或漏掉 ::-webkit-scrollbar 自身的 width。弹窗容器（比如 .modal-content）若没显式设 overflow-y: auto 且有固定高度，滚动上下文根本不会触发——样式再全也白搭。
- 弹窗内容区必须有明确尺寸约束：如
max-height: 80vh; overflow-y: auto; -
::-webkit-scrollbar必须出现在该容器选择器下，例如.modal-content::-webkit-scrollbar，不能只写::-webkit-scrollbar - 漏掉
::-webkit-scrollbar-track或::-webkit-scrollbar-thumb中任一规则，整个链式样式大概率回退到默认 - Firefox 完全无视所有
::-webkit-伪类，必须用scrollbar-width和scrollbar-color单独写在同个选择器里
.modal-content::-webkit-scrollbar 必须成套 + 显式宽高
WebKit 内核（Chrome/Edge/macOS Safari）要求这三者共存才渲染自定义滚动条：
-
.modal-content::-webkit-scrollbar { width: 8px; }—— 垂直滚动条宽度，不设等于无效 -
.modal-content::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 4px; }—— 轨道背景必须设，否则深色背景下不可见；box-shadow无效，别加 -
.modal-content::-webkit-scrollbar-thumb { background: #999; border-radius: 4px; }—— 滑块background是刚需，不设就是透明；border-radius别超width / 2（比如width: 6px时设4px会错位） - 悬停效果只能用
.modal-content::-webkit-scrollbar-thumb:hover，对.modal-content:hover加样式没用
Firefox 兼容必须写在同一选择器内，且仅作用于该容器
Firefox 不吃伪元素那一套，但支持两个属性——前提是它们写在真正触发滚动的块级元素上，比如 .modal-content，而不是 * {} 或 html。
-
.modal-content { scrollbar-width: thin; scrollbar-color: #999 #f5f5f5; }—— 顺序不能反，第二个值是轨道色；thin是唯一可调粗细的选项，auto和none不可控 - 设
scrollbar-color: #999 transparent会让轨道“消失”，滑块仍可拖，但用户找不到起点，体验断裂 - 这两个属性不支持
hover、圆角、渐变、阴影，别尝试加transition或background-image - 写在
.modal父容器上无效，必须落在实际有overflow-y: auto的子容器（如.modal-content）上
Safari（尤其 iOS）基本无法定制，别强求一致
macOS Safari 16.4+ 仅有限支持 scrollbar-width 和 scrollbar-color，但 ::-webkit-scrollbar 依然被忽略；iOS Safari 完全无视所有滚动条 CSS —— 这不是 bug，是苹果的设计决策。
-
scrollbar-width: thin在多数 Safari 版本中实测等同于auto，不可信 - 别给
.modal-content::-webkit-scrollbar-thumb:active写样式，它根本不触发 - 系统级“自动隐藏滚动条”开关（macOS 设置里）会直接覆盖所有 CSS，网页无权干预
- 如果设计强制要求圆角 + hover 变色 + iOS 正常显示，唯一可靠路径是 JS 库（如
simplebar），但它会接管原生滚动逻辑，影响惯性滚动和屏幕阅读器兼容性
最易被忽略的一点：所有样式都依赖容器真实触发了滚动上下文。哪怕规则写得再全，只要 .modal-content 没设固定高度或 max-height，又或者内容没超出限制，滚动条根本不会出现——样式自然无从谈起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
