ios 系统（尤其是 ios 14+）已移除对 `::-webkit-scrollbar` 的支持，因此纯 css 自定义滚动条在 iphone 上完全失效；本文解析根本原因，并提供符合移动端设计规范的实用替代方案。
在桌面端，开发者常使用 WebKit 专有伪元素（如 ::-webkit-scrollbar、::-webkit-scrollbar-thumb）为 Chrome、Safari（macOS）等浏览器定制滚动条样式。例如：
/* 桌面端有效，但 iPhone 上完全不生效 */
.custom-scroll {
overflow-y: auto;
}
.custom-scroll::-webkit-scrollbar {
width: 8px;
}
.custom-scroll::-webkit-scrollbar-thumb {
background-color: #007aff;
border-radius: 4px;
}然而，从 iOS 14 开始，Apple 正式移除了对所有 ::-webkit-scrollbar 伪元素的支持——这一决策并非技术缺陷，而是基于人机交互原则：在触控设备上，用户通过手指滑动内容区域完成滚动，视觉滚动条既无操作价值，又占用屏幕空间、干扰内容聚焦。苹果开发者论坛 Thread #670065 明确指出：“Custom scrollbars are not supported on iOS — they were intentionally removed as they don’t align with the platform’s touch-first UX model.”
因此，试图在 iPhone 上“修复”自定义滚动条，本质上是逆平台设计规范而行。强行模拟（如用绝对定位 .scrollbar-track + JavaScript 监听 touchmove 计算偏移量 + 手动控制 scrollTop）虽技术可行，但会带来严重问题：
- ✅ 破坏原生滚动性能（丢失惯性、弹性回弹、滚动加速等核心体验）；
- ❌ 无法兼容系统级功能（如辅助功能中的 VoiceOver 滚动导航、缩放手势）；
- ⚠️ 增加维护成本，且在不同 iOS 版本中行为不可预测。
✅ 推荐方案：拥抱原生，优化体验
- 移除无效 CSS：删除所有 ::-webkit-scrollbar 相关规则，避免冗余代码；
- 强化内容可滚动性：确保容器具有明确高度与 overflow-y: auto，并添加 -webkit-overflow-scrolling: touch（iOS 12–13 兼容，iOS 14+ 已默认启用）；
-
视觉引导替代方案：若需暗示“内容可滚动”，可用微交互动效代替滚动条，例如：
- 首屏底部添加轻微渐变遮罩（linear-gradient(to bottom, rgba(255,255,255,0), white)）；
- 滚动开始时淡入箭头图标（监听 scroll 事件判断是否在顶部）；
- 使用 scroll-snap-type 实现分页式滚动，提升方向感。
总结：移动端开发的核心是尊重平台范式。iPhone 不需要、也不支持自定义滚动条——这不是一个“待修复的 bug”，而是 Apple 对触控体验的坚定承诺。将精力转向内容布局优化、加载性能提升和手势反馈增强，才是真正提升移动用户体验的专业选择。
