bootstrap 不支持滚动条样式自定义，需手动 css 或 js 库实现；.modal-body 必须真实溢出且设 overflow-y: auto 才能触发 ::-webkit-scrollbar，firefox 仅支持有限样式，跨浏览器一致需用 simplebar 等库。
Bootstrap 本身不提供滚动条样式控制能力，所有自定义都得靠你手动写 CSS 或引入 JS 库——它只负责设 overflow-y: auto 和 max-height，剩下的原生滚动条归浏览器管。
为什么 .modal-body 上加 ::-webkit-scrollbar 没反应
根本原因不是 Bootstrap 锁死了样式，而是你没命中「真正触发滚动的容器」或它没实际溢出。
-
.modal-body必须计算后有overflow-y: auto（DevTools 里看 computed 样式，别只看 styles 面板） - 子内容高度得真超过
.modal-body的可用空间（比如塞 20 个<p></p>，而不是空 div） - 不能给
.modal-body设overflow-y: scroll——这会让滚动条永远显示，干扰::-webkit-scrollbar的激活逻辑 - 伪元素选择器必须精确到容器本身：
.modal-body::-webkit-scrollbar有效，body ::-webkit-scrollbar基本无效
Chrome / Edge / Safari 怎么用 CSS 改滚动条
WebKit 内核只认 ::-webkit-scrollbar 系列伪元素，且只在有滚动上下文的容器上生效。
最小可用规则集（直接贴进你的 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被动态修改了max-height（比如 JS 调整），记得检查是否仍满足溢出条件
Firefox 怎么处理滚动条样式
没有纯 CSS 方案。Firefox 不支持 ::-webkit-scrollbar，也不接受任何等效伪元素。
-
scrollbar-width和scrollbar-color只能控制粗细和颜色，无法改圆角、hover 效果、track 背景等（且仅 Firefox 64+ 支持） - 若项目明确要求跨浏览器一致外观，必须用 JS 滚动库，例如
SimpleBar或overlay-scrollbars - 用
SimpleBar时，别直接套在.modal上——要选.modal-body，并确保初始化时机在 modal show 之后（否则 DOM 可能还没渲染） - JS 滚动库会接管原生滚动行为，可能和 Bootstrap 的
modal键盘导航（如 Esc 关闭）、focus trap 冲突，需实测
真正容易被忽略的是：滚动条宽度变化会导致布局抖动。Chrome 112+ 和 Firefox 119+ 支持 scrollbar-gutter: stable both-edges，能预留固定 gutter 空间避免重排——但老版本浏览器只能靠 JS 测宽 + padding-right 补偿，这个细节多数人根本没意识到。
