Bootstrap 5 不接管滚动条样式，必须手动用 CSS 伪元素定制：需在有 overflow-y: auto 且固定高度的容器（如 .modal-body）上设置 ::-webkit-scrollbar（Chrome/Safari）和 scrollbar-width/color（Firefox），并用 scrollbar-gutter 防抖动。
Bootstrap 5 不管滚动条样式，你看到的滚动条就是浏览器原生的——想改，必须自己写 CSS 伪元素，不能指望 class 或 JS 插件自动生效。
为什么直接加 ::-webkit-scrollbar 没反应？
常见错误是把伪元素样式写在 body 或全局选择器上，比如：
body ::-webkit-scrollbar { width: 8px; }这基本无效。因为 ::-webkit-scrollbar 只作用于**实际产生滚动上下文的容器**，不是继承来的。如果容器没设 overflow-y: auto 或 overflow: scroll，伪元素根本不会被触发。
- 必须明确指定可滚动容器，例如
.sidebar、.modal-body、.table-responsive - 该容器需有固定高度（或 max-height）+
overflow-y: auto（仅靠overflow-x: auto不会激活垂直滚动条伪元素） - Bootstrap 的
.modal-body默认已有max-height和overflow-y: auto，可直接在其上写伪元素
如何同时兼容 Chrome/Safari 和 Firefox？
WebKit 浏览器用 ::-webkit-scrollbar 系列伪元素；Firefox 完全不认这个，得用两个独立属性：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Safari：用
::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track分别控制整体、滑块、轨道 - Firefox：用
scrollbar-width: thin | auto | none控制宽度，scrollbar-color: <thumb><track></track></thumb>控制颜色（只支持两种色值） - 两者必须写在同一选择器下，否则 Firefox 会忽略 WebKit 规则，而 Chrome 会忽略 scrollbar-color
示例（作用于侧边栏）：
.sidebar {
max-height: calc(100vh - 56px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6c757d #f8f9fa;
}
<p>.sidebar::-webkit-scrollbar {
width: 6px;
}</p><p>.sidebar::-webkit-scrollbar-thumb {
background-color: #6c757d;
border-radius: 3px;
}</p><p>.sidebar::-webkit-scrollbar-track {
background-color: #f8f9fa;
}自定义后滚动条“占位”导致内容晃动怎么办？
默认滚动条出现时会挤占容器宽度，造成内容横向跳动。这不是 Bootstrap 的问题，是浏览器行为。解决方式有两种：
- 保守方案：给容器加
padding-right补偿（需 JS 动态测滚动条宽度，例如用document.documentElement.offsetWidth - document.body.offsetWidth） - 现代方案：用
scrollbar-gutter: stable both-edges（Chrome 112+ / Firefox 119+ 支持），它会在滚动条隐藏时也预留空间，彻底避免抖动 - 注意：
scrollbar-gutter不影响样式，只管占位；仍需配合::-webkit-scrollbar或scrollbar-color来配色
哪些 Bootstrap 类自带滚动上下文？
不是所有带 overflow 的类都适合直接套用伪元素。以下类已内置滚动逻辑，可优先复用：
-
.modal-body：有max-height+overflow-y: auto，适合加自定义滚动条 -
.table-responsive：仅对overflow-x: auto生效，但它的父容器通常没设max-height，所以无法触发::-webkit-scrollbar垂直样式 —— 如需垂直滚动条，得额外包一层带max-height的 div -
.dropdown-menu：默认无高度限制，需手动加max-height和overflow-y: auto才能启用伪元素
真正容易被忽略的是：Bootstrap 5 的 .table-responsive 在桌面端默认不生效（只对 md 及以下断点响应），若要在大屏强制水平滚动，得显式加 .table-responsive-lg 或直接写内联 style="overflow-x: auto"。
