Safari中::-webkit-scrollbar无效需满足三条件：元素必须有overflow:auto/scroll且内容溢出；规则须写在html或滚动容器上，旧版不支持body；必须同时定义track和thumb，且track背景不能为transparent。
在Safari浏览器中为滚动条添加自定义颜色、宽度或圆角时，明明写了::-webkit-scrollbar规则却完全没反应，页面依然显示默认细灰滚动条——这不是代码漏写了，而是Safari对伪元素的支持有明确前提和版本限制。
确认目标元素是否满足滚动条件
给div写了::-webkit-scrollbar但没效果？先检查它有没有真正产生滚动。必须同时满足两个条件：【overflow: auto 或 overflow: scroll】 + 【内容高度/宽度超出容器】。只设overflow: hidden或visible，伪元素根本不会渲染。
用开发者工具选中该元素 → 查看Computed面板 → 拉到最底部确认overflow值是否为auto或scroll；再手动缩窄窗口或往里塞更多内容，确保出现原生滚动条——这是所有样式生效的物理基础。
修复Safari中滚动条样式不生效的三步操作
第一步：把::-webkit-scrollbar规则写在html或具体滚动容器上，不要只挂在:root或body。Safari 16.4+才支持body::-webkit-scrollbar，旧版只认html或带overflow的div。
立即学习“前端免费学习笔记（深入）”；
第二步：必须成对定义轨道与滑块。单独写::-webkit-scrollbar-thumb而漏掉::-webkit-scrollbar-track，旧版Safari会直接回退到系统默认样式。轨道背景别用transparent，改用#f5f5f5这类实色。
第三步：清空Safari专属缓存并强制重载。按Option + Command + E → 点击“开发”菜单 → “重新载入忽略缓存”，再执行一次“清空缓存”。缓存损坏会导致CSS解析中断，样式表加载失败时页面只会显示纯文字和错位布局。
Firefox与Safari共存写法
方法一：用CSS层叠覆盖，先写Firefox专用属性，再写WebKit规则
html { scrollbar-width: thin; scrollbar-color: #6c6c6c #f1f1f1; }
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: #f1f1f1; }
html::-webkit-scrollbar-thumb { background: #6c6c6c; border-radius: 4px; }
注意：scrollbar-color两个值顺序不能颠倒——第一个是滑块色，第二个是轨道色。写反了Firefox会当无效声明跳过。
方法二：用@supports做特性检测，避免污染不支持的浏览器
@supports (scrollbar-color: auto) { html { scrollbar-width: thin; scrollbar-color: #6c6c6c #f1f1f1; } }
@supports selector(::-webkit-scrollbar) { html::-webkit-scrollbar { width: 8px; } /* 其他WebKit规则 */ }
iOS设备上的现实处理
从iOS 14起，Apple已彻底移除::-webkit-scrollbar支持，iPhone/iPad Safari中任何CSS滚动条样式均无效。这不是bug，而是主动废弃——系统认为触控滚动无需视觉滚动条，强行显示反而干扰手指滑动体验。
若项目必须在iOS提供滚动感知，改用顶部进度条替代：监听scroll事件，动态计算scrollTop / (scrollHeight - clientHeight)，将结果映射为#scroll-progress元素的width百分比。这比JS模拟滚动条更轻量，且完全符合iOS人机界面指南。
