需同时满足三条件：.modal-body 的 overflow-y 为 auto、内容真实溢出、无父级 overflow: hidden 截断；webkit 用 .modal-body::-webkit-scrollbar 系列规则，firefox 用 .modal-body { scrollbar-width: thin; scrollbar-color: #6c757d #f8f9fa; }，且 css 必须置于 bootstrap 样式之后。
直接改 .modal-body 的 ::-webkit-scrollbar 样式，再补上 Firefox 专用的 scrollbar-width 和 scrollbar-color —— 其他地方写都没用，也别指望 Bootstrap 自带支持。
为什么 .modal-body::-webkit-scrollbar 没反应
不是语法错，是根本没触发滚动上下文。确认三件事：
-
.modal-body的 computedoverflow-y必须是auto（不是scroll，也不是hidden） - 子内容真实高度必须超过
.modal-body的可用空间（比如塞 10 个<p></p>，而不是空<div>） <li>不能在父级如 <code>.modal-content或.modal-dialog上设overflow: hidden或height: 100%，否则会截断滚动行为
Chrome/Safari/Edge 怎么美化垂直滚动条
只对 .modal-body 写，别写 body 或 .modal：
.modal-body::-webkit-scrollbar {
width: 6px;
}
.modal-body::-webkit-scrollbar-track {
background: #f8f9fa;
border-radius: 3px;
}
.modal-body::-webkit-scrollbar-thumb {
background: #6c757d;
border-radius: 3px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
background: #495057;
}
注意：width 控垂直条粗细，height 是给水平滚动条用的；border-radius 在 Windows 下效果明显，macOS 可能被系统设置覆盖。
Firefox 怎么让滚动条不那么丑
它完全不认 ::-webkit-scrollbar，只能用两个属性，且必须写在同一选择器里：
.modal-body {
scrollbar-width: thin;
scrollbar-color: #6c757d #f8f9fa;
}
要点：
-
scrollbar-width只接受thin、auto、none，没有像素控制 -
scrollbar-color顺序固定：先拇指色，再轨道色；漏一个，整行失效 - 圆角、hover、渐变、阴影——Firefox 里统统不支持
iOS Safari 滚动卡顿或没惯性
即使样式生效，滚动也可能生硬、松手即停。必须加这行：
.modal-body {
-webkit-overflow-scrolling: touch;
}
它只对 WebKit 内核生效，且只作用于真正设置了 overflow-y: auto 的元素。别写在 .modal 或 .modal-content 上，写了也没用。新版 Safari 虽已标记为 deprecated，但目前仍是唯一可靠解法。
最容易被忽略的是：Firefox 规则必须和 WebKit 规则共存，且都限定在 .modal-body 上；另外，所有自定义滚动条 CSS 必须加载在 Bootstrap CSS 之后，否则会被基础重置覆盖。
