ios 系统自 ios 14 起已彻底移除对 `::-webkit-scrollbar` 的支持，因此基于 css 的传统自定义滚动条在 iphone 上无效；本文详解原因、替代方案及轻量级 javascript 实现思路。
在桌面端（如 Chrome），我们习惯使用 ::-webkit-scrollbar 系列伪元素来美化滚动条，例如：
/* 桌面端有效，但 iPhone 上完全失效 */
.container {
overflow-y: auto;
}
.container::-webkit-scrollbar {
width: 8px;
}
.container::-webkit-scrollbar-track {
background: #f1f1f1;
}
.container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}然而，从 iOS 14 开始，Apple 已正式弃用并移除了对所有 ::-webkit-scrollbar 伪元素的支持——这一决定并非疏漏，而是基于人机交互原则：在触屏设备上，用户通过手指直接滑动内容区域，滚动条本身既不可见、也不参与交互，强行显示反而干扰视觉、降低可访问性。Apple 开发者论坛 中官方明确表示：“Custom scrollbars are not supported on iOS, and there are no plans to reintroduce them.”
因此，试图“修复” iPhone 上的自定义滚动条，本质上是一个需重新审视设计目标的问题。以下是务实建议：
✅ 推荐做法：尊重平台规范，禁用非必要定制
- 移除针对 iOS 的 ::-webkit-scrollbar 样式，或通过媒体查询精准屏蔽：
@supports (-webkit-touch-callout: none) { .container::-webkit-scrollbar { display: none; } }（注：-webkit-touch-callout 是 iOS 特有特性，可作为可靠检测依据）
⚠️ 不推荐做法：手动模拟滚动条（高成本低收益）
虽可通过绝对定位 .scrollbar-track + .scrollbar-thumb + scroll 事件监听 + scrollTop 计算实现视觉模拟，但存在严重缺陷：
? 真正有价值的增强方向
若需提升移动端滚动体验，建议转向以下更自然的方案：
- 使用 overscroll-behavior: contain 防止滚动穿透；
- 添加平滑滚动：scroll-behavior: smooth（iOS 15.4+ 全面支持）；
- 为长列表启用 contain: strict 提升渲染性能；
- 在关键锚点处提供「回到顶部」浮动按钮（带 position: sticky）。
总结：不是“如何让 iPhone 显示自定义滚动条”，而是“如何让滚动体验在 iPhone 上更自然、更高效”。 放下对桌面端样式的执念，拥抱触控优先的设计逻辑，才是现代 Web 开发的正确路径。
