ios safari不支持::-webkit-scrollbar是webkit内核在移动端的主动限制，仅safari 16.4+支持scrollbar-width: thin或scrollbar-color（需正确语法与作用域），其他平台需组合css或改用js库。
移动端滚动条样式无法统一控制，iOS Safari 基本不支持自定义，Android Chrome 可用 ::-webkit-scrollbar 有限调整，Firefox 仅认 scrollbar-width 和 scrollbar-color；想“一套 CSS 覆盖所有设备”，行不通。
为什么 iOS Safari 上 ::-webkit-scrollbar 完全无效
iOS Safari（包括 16.4+）识别但忽略 ::-webkit-scrollbar 系列伪元素。这不是写法问题，是 WebKit 内核在移动端的主动限制——它不渲染轨道、不响应 hover、不支持 transition，甚至 display: none 都可能被无视。
常见误判现象：
- DevTools 里看到样式已加载，但滚动条仍是系统默认（或干脆不显示）
- 加了
width: 8px没反应，误以为 selector 错了，其实 selector 对了也没用 - 在 macOS Safari 上调通了，一到 iPhone 就失效，不是缓存问题，是内核策略不同
真正能起作用的只有两个降级路径：scrollbar-width: thin（Safari 16.4+ 有限支持）或彻底隐藏后靠视觉提示引导滚动。
scrollbar-width 和 scrollbar-color 在 Firefox 中怎么用才生效
这两个属性只对**直接触发滚动的块级容器**有效，比如设了 overflow: auto 的 <div class="list">，不能写在 <code>html 或 body 上，否则静默失败。
关键约束：
-
scrollbar-width只接受三个值：auto、thin、none；没有6px这类像素单位 -
scrollbar-color格式必须是scrollbar-color: <thumb><track></track></thumb>，顺序反了（比如scrollbar-color: #f1f1f1 #888）就完全不生效 - 设
scrollbar-color: #888 transparent会让轨道“消失”，但滑块仍可拖动——用户找不到起点，体验断裂 - 这两个属性不支持
:hover、border-radius、box-shadow，纯色+粗细两级控制
如何安全隐藏滚动条但保留滚动功能
隐藏不是为了“看不见”，而是避免干扰设计，同时确保内容可滚动。不同浏览器需组合使用：
- Chrome/Edge：用
.container::-webkit-scrollbar { display: none }（注意必须成套声明，否则可能回退） - Firefox：用
scrollbar-width: none - IE/Edge Legacy：用
-ms-overflow-style: none - Safari（macOS/iOS）：无 CSS 隐藏方案，只能靠
overflow: scroll+ 视觉暗示（如底部渐变遮罩、内容截断阴影）
额外要点：
- 隐藏后务必加
-webkit-overflow-scrolling: touch（iOS 仍部分支持），否则惯性滚动卡顿 - 横向滚动场景下，
overflow-x: auto容器若包着<table>，必须用 <code><div> 直接包裹，<code><table> 自身设 <code>table-layout: fixed+white-space: nowrap，否则列宽崩塌 - 弹窗类容器推荐直接用
overflow-y: scroll（而非auto），强制滚动条常驻，规避缩放导致的偶发性不可滚动 - 圆角滑块 + hover 变色 + 滑动缩放动画
- 滚动条始终固定宽度，且在 iOS 和 Android 上视觉一致
- 需要监听滚动条拖拽事件、自定义 thumb 位置计算逻辑
- 表格嵌套滚动 + 多层 overflow 容器 + 同时支持键盘导航和触控
什么时候该放弃 CSS，改用 JS 滚动条库
当设计稿明确要求以下任意一项时，原生 CSS 方案已到极限：
SimpleBar 和 OverlayScrollbars 是目前最稳的选择：它们会检测 touch 支持，Android 渲染自定义滚动条，iOS 则退化为无滚动条但保留原生滑动行为，并自动注入 scrollbar-width: none 等兼容样式。别自己手写 JS 模拟——滚动惯性、DPR 适配、focus 管理、无障碍（ARIA）支持，这些坑比想象中深得多。
