因为伪元素未作用于真实滚动容器，必须确保.modal-body计算后overflow-y: auto且内容真实溢出，WebKit仅支持其::-webkit-scrollbar系列伪元素，Firefox需用scrollbar-width和scrollbar-color属性配对设置。
为什么 .modal-body::-webkit-scrollbar 没反应？
不是 Bootstrap 锁死了样式，而是伪元素根本没挂到真正滚动的容器上。浏览器只对 overflow-y: auto 且内容真实溢出的元素渲染滚动条，::-webkit-scrollbar 必须直接写在该元素选择器后——比如 .modal-body，而不是 body 或 .modal。
- 检查 DevTools 的 Computed 面板，确认
.modal-body计算后的overflow-y是auto，不是visible或hidden - 确保内容高度真超出容器：塞 10+ 行
<p>测试，空<div>不会触发滚动 - 别用
overflow-y: scroll——它强制显示滚动条，会干扰:hover等交互逻辑
Chrome/Edge/Safari 中最小可用样式怎么写？
四条规则必须共存，缺一不可，且都得挂到同一个可滚动容器上：
-
.modal-body::-webkit-scrollbar { width: 8px; }——width控垂直条粗细，小于6px可能被忽略（尤其 macOS） -
.modal-body::-webkit-scrollbar-track { background: #f8f9fa; }—— 别加border或box-shadow，某些 Chrome 版本会错位 -
.modal-body::-webkit-scrollbar-thumb { background: #6c757d; border-radius: 4px; }—— 必须设background，否则不可见 -
.modal-body::-webkit-scrollbar-thumb:hover { background: #495057; }—— hover 效果仅在overflow-y: auto下稳定生效
Firefox 怎么配 scrollbar-width 和 scrollbar-color？
Firefox 完全不认 ::-webkit-scrollbar，必须用两个属性写在同一选择器里，漏一个就全失效：
.modal-body { scrollbar-width: thin; scrollbar-color: #6c757d #f8f9fa; }-
scrollbar-width: thin是建议值，macOS 下受系统设置影响（“仅当滚动时显示”才生效），Windows 基本无视 -
scrollbar-color必须传两个颜色：第一个是滑块色，第二个是轨道色；写成scrollbar-color: #6c757d;会回退到默认样式 - 这两个属性仅 Firefox 64+ 支持，无法控制圆角、阴影、hover 等细节
样式放哪儿才不被覆盖、不白写？
Bootstrap 5 不重置滚动条，但它的基础 CSS 加载顺序和选择器权重常导致你的规则失效：
立即学习“前端免费学习笔记（深入）”；
- CSS 必须放在 Bootstrap CSS 文件之后（
<link rel="stylesheet">标签靠后） - 如果非得加
!important才生效，说明选择器不够具体——优先升级为.modal.show .modal-body，而不是暴力覆盖 - 深色模式下避免用
rgba()，改用#343a40这类不透明色值，旧版 Safari 对透明度支持不稳定 - 移动端 Safari（iOS 16+）仅支持
thumb颜色，不支持border-radius和box-shadow，真机调试时可能回退原生样式
跨浏览器一致外观基本做不到纯 CSS 实现；若项目强依赖统一滚动条，得换 JS 库如 SimpleBar，但要注意它可能干扰 Bootstrap modal 的键盘导航和 focus trap。
