::-webkit-scrollbar仅在WebKit/Blink内核浏览器（Chrome/Edge/Safari）中生效，Firefox完全不支持，仅支持scrollbar-width和scrollbar-color；移动端Safari支持极弱，真机调试必须验证。
Chrome/Firefox 里 ::-webkit-scrollbar 为什么没效果
因为这个伪元素只在基于 webkit/blink 的浏览器（chrome、edge、safari）中生效，firefox 完全不支持，直接忽略它。你在 firefox 里写一堆 ::-webkit-scrollbar-track 规则，页面滚动条纹丝不动——不是代码错了，是浏览器根本不认。
实操建议：
- 先用
if (CSS.supports('scrollbar-width', 'thin'))检测是否为 Firefox，再决定是否走@supports分支 - Firefox 只支持两个原生配置：
scrollbar-width: thin | auto | none和scrollbar-color: <thumb><track></track></thumb>，仅此而已 - 别试图用 JS 动态插入
::-webkit-scrollbar样式表——它必须在 CSSOM 加载阶段就存在，运行时注入无效
Bootstrap 5 不提供滚动条样式，但能和自定义规则共存
Bootstrap 5 默认完全不管 ::-webkit-scrollbar，也不重置 scrollbar-width。这意味着你写的自定义滚动条样式不会被它覆盖，但也不会自动继承它的主题色或响应式逻辑。
实操建议：
- 把滚动条样式写在 Bootstrap CSS 之后的独立
<style></style>块里，避免被其基础重置干扰 - 想用 Bootstrap 调色板（比如
$primary）？得手动在构建时用 Sass 变量导出为 CSS 自定义属性，例如:root { --bs-primary: #0d6efd; }，再在::-webkit-scrollbar-thumb中引用var(--bs-primary) - 注意移动端 Safari 对
::-webkit-scrollbar支持极弱——iOS 16+ 才开始部分支持thumb颜色，且不支持圆角、阴影等
overflow: overlay 已废弃，别再用了
以前有人用 overflow: overlay 让滚动条不占位，现在所有主流浏览器都已移除该值。设了等于白设，还会触发 Chrome 的弃用警告："overlay is deprecated and will be removed in a future release"。
实操建议：
- 真正需要“不占位”的场景，改用
overflow: auto+padding-right补偿（JS 动态测滚动条宽度），或用scrollbar-gutter: stable both-edges（Chrome 112+ / Firefox 119+ 支持） -
scrollbar-gutter是目前最干净的方案：它预留固定 gutter 空间，滚动条出现时不重排内容，且兼容性正在快速提升 - 别依赖
getComputedStyle(el).overflow判断是否显示滚动条——它返回的是声明值，不是实际渲染状态
移动端真机调试时滚动条突然消失
不是样式失效，是 iOS 和 Android WebView 默认禁用自定义滚动条。即使你在桌面 Chrome 开发者工具里模拟 iPhone，看到的也是假象——真机上 ::-webkit-scrollbar 规则压根不解析。
实操建议：
- Android Chrome 115+ 开始支持
::-webkit-scrollbar（需开启chrome://flags/#enable-scroll-customization，但用户环境不可控） - iOS 目前唯一可靠方式：用
overscroll-behavior: contain抑制回弹，配合自定义容器（如div+scrollTop+touchstart/move）模拟滚动，再画个假 thumb - 真机验证必须用 Safari Web Inspector 连接 iOS 设备，看 Elements 面板里是否出现
::-webkit-scrollbar的 computed styles —— 没有，就说明被忽略了
