Bootstrap 5 不提供滚动条样式干预，::-webkit-scrollbar 是原生 CSS 伪元素，仅在 Chrome/Edge/Safari 有效；其生效前提为容器必须显式设置 overflow-y: auto 且内容溢出，选择器须精准作用于该容器，如 .custom-scroll::-webkit-scrollbar。
Bootstrap 5 完全不干预滚动条样式，::-webkit-scrollbar 不是 Bootstrap 的功能，而是你必须手动加的原生 CSS；它只在 Chrome、Edge、Safari 生效，Firefox 和移动端 Safari 基本无效。
为什么写了 ::-webkit-scrollbar 却没反应？
最常见原因是目标元素根本没触发滚动行为——伪元素不会凭空生效。
-
::-webkit-scrollbar必须作用于**实际发生溢出的容器本身**，比如.modal-body、.table-responsive内部的自定义div，而不是body或html - 容器必须显式设置
overflow-y: auto（或overflow: auto），且有固定height或max-height，内容高度超出才会出现滚动条 - Bootstrap 的
.modal-body默认带max-height和overflow-y: auto，但如果你覆盖了它的overflow为visible或hidden，伪元素就失效 - 别用
overflow: overlay——它已被所有主流浏览器废弃，Chrome 会报警告，且样式不生效
怎样写才能在 Chrome/Edge/Safari 里真正生效？
规则必须完整、选择器要够具体，且顺序不能错。
- 先确保容器有滚动能力：
.custom-scroll { max-height: 300px; overflow-y: auto; } - 再写伪元素，全部挂在这个类上：
.custom-scroll::-webkit-scrollbar、.custom-scroll::-webkit-scrollbar-track、.custom-scroll::-webkit-scrollbar-thumb -
::-webkit-scrollbar至少设width（建议 6–12px），太窄（ -
::-webkit-scrollbar-thumb至少设background，否则不可见；可加border-radius圆角，但 iOS Safari 16+ 才支持颜色，不支持圆角 - 把这段 CSS 放在 Bootstrap CSS 文件之后，避免被更宽泛的重置规则覆盖
Firefox 和移动端怎么处理？
Firefox 完全无视 ::-webkit-scrollbar，得换方案。
- Firefox 只认两个属性：
scrollbar-width: thin | auto | none和scrollbar-color: thumb-color track-color - 它们只能作用于根元素（
html）或直接滚动容器（如.modal-body），但兼容性有限：仅 Firefox 64+ 支持，且不支持圆角、阴影等细节 - iOS Safari 基本禁用自定义滚动条，真机调试时即使 CSS 正确，滚动条也可能“消失”或回退到原生样式
- 如果需要跨浏览器一致体验，别硬刚伪元素——改用 JS 库如
overlay-scrollbars或simplebar，它们通过 DOM 模拟滚动条，可控性强
滚动条占位导致内容晃动怎么办？
这是浏览器默认行为，和 Bootstrap 无关，但容易被误认为是样式问题。
- 滚动条出现时会挤占容器宽度，造成右侧内容横向跳动
-
scrollbar-gutter: stable both-edges是目前最干净的解法（Chrome 112+ / Firefox 119+ 支持），它预留固定空白区，滚动条出现时不重排 - 老版本浏览器可用 JS 动态测滚动条宽度，然后给容器加
padding-right补偿——但需监听resize和orientationchange - 别用
overflow: hidden配合 JS 滚动模拟——牺牲键盘导航和屏幕阅读器支持，可访问性掉线
真正难的不是写对伪元素，而是判断该在哪一层容器上加、是否真有溢出、以及要不要为 Firefox 和 iOS 做降级。很多项目卡在这一步，不是代码写错了，是忘了检查 computed 样式里 overflow-y 实际值是不是 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
