Bootstrap 5 不接管滚动条样式，需手动用 CSS 伪元素定制：WebKit 浏览器用 ::-webkit-scrollbar 系列作用于有 overflow-y: auto 和固定高度的容器（如 .modal-body），Firefox 则需 scrollbar-width 和 scrollbar-color 同选器声明。
Bootstrap 5 不管滚动条样式，你看到的滚动条就是浏览器原生的——想改，必须自己写 CSS 伪元素，不能指望 class 或 JS 插件自动生效。
为什么 ::-webkit-scrollbar 写在 body 上没反应
因为伪元素只作用于**实际产生滚动上下文的容器**，不是继承来的。如果容器没设 overflow-y: auto 或 overflow: scroll，伪元素根本不会被触发。
- 必须明确指定可滚动容器，例如
.modal-body、.table-responsive、.sidebar - 该容器需有固定高度（或
max-height）+overflow-y: auto（仅靠overflow-x: auto不会激活垂直滚动条伪元素） -
.modal-body默认已有max-height和overflow-y: auto，可直接在其上写伪元素
Chrome/Safari/Edge 和 Firefox 要分开写
WebKit 内核浏览器用 ::-webkit-scrollbar 系列，Firefox 则依赖 scrollbar-width 和 scrollbar-color，两者不兼容，必须共存。
- WebKit 规则要写全：
.modal-body::-webkit-scrollbar、.modal-body::-webkit-scrollbar-track、.modal-body::-webkit-scrollbar-thumb - Firefox 规则必须写在同一选择器里：
.modal-body { scrollbar-width: thin; scrollbar-color: #6c757d #f8f9fa; } -
scrollbar-width: thin在 macOS 下受系统设置影响（“仅当滚动时”才生效），Windows 基本忽略；老版 Firefox（
容易踩的坑：优先级、性能和可访问性
伪元素规则常被忽略，不是语法错，而是权重低或位置不对；样式太花哨还会拖慢低端设备。
- 把自定义滚动条 CSS 放在 Bootstrap CSS 之后的独立
<style></style>块里，避免被其基础重置干扰 - 如果非得加
!important才生效，说明选择器不够具体——优先加类名层级，比如.modal.show .modal-body，而不是靠暴力覆盖 -
::-webkit-scrollbar-thumb避免用box-shadow、gradient或opacity，容易触发额外合成层，移动端卡顿明显 -
scrollbar-width: none能隐藏滚动条但保留滚动能力，不过键盘用户可能找不到滚动入口，慎用
真正起效的关键不是写多少规则，而是确认三件事：目标容器是否真在滚动、CSS 是否作用到那个容器上、浏览器是否支持当前属性——尤其 Firefox 的 scrollbar-color 必须和 scrollbar-width 同行出现，漏一个就全失效。
