Bootstrap 不支持滚动条样式自定义，需手动 CSS；.modal-body::-webkit-scrollbar 无效主因是容器未真正溢出或选择器不匹配；Chrome/Edge/Safari 用 ::-webkit-scrollbar 系列，Firefox 仅支持 scrollbar-width 和 scrollbar-color，iOS Safari 支持极弱。
bootstrap 本身不提供滚动条样式控制能力，所有自定义都得靠你手动写 css —— 它只负责设 overflow-y: auto 和 max-height，剩下的原生滚动条归浏览器管。
为什么 .modal-body::-webkit-scrollbar 没反应
根本原因不是 Bootstrap 锁死了样式，而是你没命中「真正触发滚动的容器」或它没实际溢出。
-
.modal-body必须计算后有overflow-y: auto（用 DevTools 看 Computed 面板，别只看 Styles） - 子内容高度得真超过
.modal-body的可用空间（比如塞 20 个<p>，而不是空<div>） - 不能给
.modal-body设overflow-y: scroll——这会让滚动条永远显示，干扰::-webkit-scrollbar的激活逻辑 - 伪元素选择器必须精确到容器本身：
.modal-body::-webkit-scrollbar有效，body ::-webkit-scrollbar基本无效
Chrome/Edge/Safari 怎么用 ::-webkit-scrollbar
WebKit 内核只认这个系列伪元素，且只在有滚动上下文的容器上生效。
- 最小可用规则集（直接贴进你的 CSS）：
.modal-body::-webkit-scrollbar { width: 8px; } .modal-body::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .modal-body::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } .modal-body::-webkit-scrollbar-thumb:hover { background: #a0a0a0; } -
width控垂直滚动条粗细；height是给水平滚动条用的，模态框里基本不用 - 这些样式对 Firefox、旧版 IE 完全无效——它们根本不解析
::-webkit-开头的伪元素 - 如果
.modal-body被 JS 动态修改了max-height，记得检查是否仍满足溢出条件
Firefox 怎么处理滚动条样式
没有纯 CSS 方案。Firefox 不支持 ::-webkit-scrollbar，也不接受任何等效伪元素。
- 只支持两个专用属性：
scrollbar-width和scrollbar-color，且必须写在同一选择器下：.modal-body { scrollbar-width: thin; scrollbar-color: #6c757d #f8f9fa; } -
scrollbar-width只有thin、auto、none三个值，无法精确控宽；macOS 下还受系统设置“仅当滚动时显示”影响 -
scrollbar-color严格按顺序：先拇指色，再轨道色；漏一个，整行失效 - 别指望它支持圆角、hover、渐变——这些在 Firefox 里就是不可实现的
- 若项目明确要求跨浏览器一致外观，必须用 JS 滚动库，例如
SimpleBar或overlay-scrollbars
最常被忽略的一点：移动端 Safari 对 ::-webkit-scrollbar 支持极弱——iOS 16+ 才开始渲染 thumb 颜色，但依然不支持 border-radius、hover 或 track background。真机调试时滚动条“突然消失”，不是 bug，是平台限制。
