::-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 行
  测试，空
  不触发）
• 没误设 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 的必需属性，不设就不可见。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载

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 文件之后的独立 块里
• 如果仍不生效，别急着加 !important，先提升选择器精度，比如用 .modal.show .modal-body 替代单纯 .modal-body
• 移动端 Safari 对 ::-webkit-scrollbar 支持极弱（iOS 16+ 才开始支持滑块颜色），真机必须验证，别只靠模拟器

真正起效的关键不是堆砌规则，而是确认三件事：目标容器是否真在滚动、CSS 是否作用到那个容器上、浏览器是否支持当前属性——尤其 Firefox 的 scrollbar-color 必须和 scrollbar-width 同行出现，漏一个就全失效。