先确认容器真正在滚动，必须同时满足：有max-height或height、内容真实溢出、设置overflow-y:auto；webkit浏览器需四条::-webkit-scrollbar规则共存且选择器精确匹配容器，firefox则须同选器声明scrollbar-width和scrollbar-color。
滚动条样式没生效？先确认容器真正在滚动
直接给 .table-responsive 或 .modal-body 写 ::-webkit-scrollbar 却没反应，大概率不是 CSS 写错了，而是那个元素根本没触发滚动行为。必须同时满足三个条件：容器有明确的 max-height 或 height、内容真实超出该高度、且设置了 overflow-y: auto（或 overflow: auto）。
用 DevTools 检查目标元素的 Computed 样式，确认 overflow-y 是 auto 而非 visible 或被父级 overflow: hidden 覆盖；再看实际内容高度是否真的大于容器高度——塞满 10 行数据再测，空 <div> 不算数。
<h3>WebKit 浏览器里怎么写才有效</h3>
<p><code>::-webkit-scrollbar 只在 Chrome、Edge、Safari 生效，Firefox 完全不认。别在 Firefox 里调试它，该用 scrollbar-width 和 scrollbar-color。
-
::-webkit-scrollbar必须设width（建议 6–12px），小于 6px 可能被浏览器忽略 -
::-webkit-scrollbar-thumb至少要设background，否则不可见 -
::-webkit-scrollbar-track只支持background和border-radius，加border或box-shadow在旧版 Chrome 下易错位 - 选择器必须精确匹配滚动容器本身，比如
.table-responsive::-webkit-scrollbar，而不是body ::-webkit-scrollbar
Bootstrap 5 中自定义滚动条的兼容写法
Bootstrap 5 默认不重置滚动条样式，但它的 CSS 加载顺序和选择器权重可能覆盖你的规则。CSS 文件得放在 Bootstrap 主样式之后；如果失效，提升选择器权重，比如用 .my-table-container .table-responsive::-webkit-scrollbar。
- 别对
<table> 直接设 <code>display: block来强加滚动——会破坏.table-striped、.table-hover等类的样式继承 - 若同时需要水平 + 垂直滚动，结构得是：
<div class="table-responsive"><div style="max-height: 400px; overflow-y: auto;"><table class="table"></table></div></div>，此时自定义样式要挂在内层div上，不是外层.table-responsive - 移动端触控卡顿？补上
-webkit-overflow-scrolling: touch到滚动容器上 - 给滚动容器加
padding-right: 12px（值≈滚动条宽度），并在::-webkit-scrollbar显式设宽，保持一致 - 或者用
overflow: overlay（仅 Safari 支持）或overflow: scroll强制常驻滚动条——但后者在 iOS 上可能影响:hover效果
滚动条出现后内容“跳动”怎么办
原生滚动条出现时会挤占容器宽度，导致内容横向晃动。这不是 Bug，是默认行为。解决办法只有两个：
真正麻烦的是固定表头、sticky 列这类需求，.table-responsive 的 display: block 会破坏 position: sticky 的滚动上下文，这时候就得放弃 Bootstrap 内置类，手写容器并精细控制 overflow 和 display 行为。
