::-webkit-scrollbar 只在真实触发垂直滚动的元素上生效，需同时满足 max-height（或 height）、overflow-y: auto 且内容真实溢出；Firefox 则必须用 scrollbar-width 和 scrollbar-color 同行声明。
直接写 ::-webkit-scrollbar 没反应，不是 Bootstrap 锁死了样式，而是你没写对容器——它只在「真实触发垂直滚动」的元素上生效，且必须同时满足：有 max-height（或 height）、overflow-y: auto、内容真实溢出。
.modal-body 上 ::-webkit-scrollbar 为什么无效
常见失效不是语法错，而是容器没真正滚动。打开 DevTools，切到 Computed 面板，确认三点：
-
.modal-body计算后的overflow-y是auto，不是visible或被父级覆盖成hidden - 子内容高度真超过
.modal-body的可用空间（塞 15 行<p></p>测试，空<div> 不触发） <li>没误设 <code>overflow-y: scroll——这会让滚动条常驻，导致::-webkit-scrollbar-thumb:hover失效
Chrome/Edge/Safari 最小可用规则集
四条伪元素必须共存，且全部挂在同一个可滚动容器上（比如 .modal-body），缺一不可：
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: #f1f1f1; }
.modal-body::-webkit-scrollbar-thumb { background: #6c757d; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #495057; }
注意：width 控垂直条粗细，小于 6px 在 macOS 下可能被忽略；::-webkit-scrollbar-track 别加 border 或 box-shadow，某些 Chrome 版本会错位；background 是 ::-webkit-scrollbar-thumb 的必需属性，不设就不可见。
立即学习“前端免费学习笔记（深入）”；
Firefox 必须用 scrollbar-width 和 scrollbar-color
Firefox 完全不解析 ::-webkit-scrollbar，只认这两个属性，且必须写在同一选择器里，漏一个就全失效：
.modal-body {
scrollbar-width: thin;
scrollbar-color: #6c757d #f1f1f1;
}
scrollbar-width: thin 是建议值，macOS 下受系统“仅当滚动时显示”设置影响；scrollbar-color 严格按顺序：第一个是滑块色，第二个是轨道色；写成 scrollbar-color: #6c757d; 会回退到默认样式。
样式放哪儿才不白写
Bootstrap 5 不重置滚动条，但它的 CSS 加载顺序和选择器权重常导致你的规则被覆盖：
- 把自定义滚动条 CSS 放在 Bootstrap 主 CSS 文件之后的独立
<style></style>块里 - 如果仍不生效，别急着加
!important，先提升选择器精度，比如用.modal.show .modal-body替代单纯.modal-body - 移动端 Safari 对
::-webkit-scrollbar支持极弱（iOS 16+ 才开始支持滑块颜色），真机必须验证，别只靠模拟器
真正起效的关键不是堆砌规则，而是确认三件事：目标容器是否真在滚动、CSS 是否作用到那个容器上、浏览器是否支持当前属性——尤其 Firefox 的 scrollbar-color 必须和 scrollbar-width 同行出现，漏一个就全失效。
