.modal-body::-webkit-scrollbar没反应，是因为伪元素仅作用于实际触发滚动的容器，须确保.modal-body已设max-height和overflow-y:auto且内容真实溢出，选择器必须精确匹配该元素本身。
直接写 ::-webkit-scrollbar 没反应，不是你代码错了，而是它根本没挂到真正滚动的容器上——.modal-body 必须实际溢出、显式设 overflow-y: auto，且选择器必须精准匹配该元素本身。
为什么 .modal-body 上加 ::-webkit-scrollbar 没效果
伪元素不继承、不传播，只对「当前计算后触发滚动行为」的元素生效。常见失效原因：
-
.modal-body的overflow-y被覆盖成visible或hidden（检查 DevTools 的 Computed 面板，别只看 Styles） - 内容高度没真超出
.modal-body的max-height（塞 20 个<p>测试，空<div>不行） - 写了
body ::-webkit-scrollbar这类宽泛选择器——父元素不滚动，伪元素不会激活 - 用了
overflow-y: scroll，滚动条强制常驻，::-webkit-scrollbar-thumb:hover等交互逻辑可能异常
Chrome/Edge/Safari 中最小可用写法
四条规则 + 精确选择器，就能控制基本外观。重点不是堆样式，而是确保它被浏览器识别并应用：
-
.modal-body::-webkit-scrollbar必须设width（建议 6–12px），太窄（如2px）可能被忽略 -
.modal-body::-webkit-scrollbar-track只支持background和border-radius，别加border或box-shadow，旧版 Chrome 下易错位 -
.modal-body::-webkit-scrollbar-thumb至少设background，否则不可见；border-radius在 iOS Safari 16+ 才支持 - CSS 必须放在 Bootstrap CSS 文件之后加载，否则可能被其重置规则覆盖；用
.my-modal .modal-body提升权重，比!important更稳妥
Firefox 怎么同步生效
Firefox 完全无视 ::-webkit-scrollbar，只认两个原生属性，且必须和 WebKit 规则写在同一选择器下：
立即学习“前端免费学习笔记（深入）”；
.modal-body { scrollbar-width: thin; scrollbar-color: #6c757d #f8f9fa; }-
scrollbar-width只有thin、auto、none三个值，无法精确控宽；macOS 下还受系统设置“仅当滚动时显示”影响 -
scrollbar-color严格按顺序：先拇指色，再轨道色；漏一个，整行失效 - 别指望它支持圆角、hover、渐变——这些在 Firefox 里就是不可实现的
移动端和跨浏览器一致性的现实约束
iOS Safari 对 ::-webkit-scrollbar 支持极弱：iOS 16+ 才开始渲染 thumb background，但依然不支持 border-radius、hover 或 track background。真机调试时滚动条“突然消失”，不是 bug，是平台限制。
如果项目明确要求所有浏览器滚动条外观一致，必须放弃纯 CSS 方案，改用 JS 库（如 SimpleBar 或 overlay-scrollbars）。但要注意：SimpleBar 初始化必须在 .modal 显示之后（DOM 渲染完成），且会干扰 Bootstrap 的键盘导航（Esc 关闭、Tab 焦点捕获）。
最常被忽略的一点：自定义滚动条不是视觉糖衣，它直接影响可访问性。把 scrollbar-width: none 当“隐藏滚动条”用，键盘用户会卡在内容里找不到滚动入口——这不是美化，是功能阉割。
