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 上的自定义滚动条，本质上是一个需重新审视设计目标的问题。以下是务实建议：
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
✅ 推荐做法：尊重平台规范，禁用非必要定制
- 移除针对 iOS 的 ::-webkit-scrollbar 样式，或通过媒体查询精准屏蔽：
@supports (-webkit-touch-callout: none) { .container::-webkit-scrollbar { display: none; } }（注：-webkit-touch-callout 是 iOS 特有特性，可作为可靠检测依据）
⚠️ 不推荐做法：手动模拟滚动条（高成本低收益）
虽可通过绝对定位 .scrollbar-track + .scrollbar-thumb + scroll 事件监听 + scrollTop 计算实现视觉模拟，但存在严重缺陷：
- 无法响应原生惯性滚动（momentum scrolling）；
- 手势中断时 thumb 位置易不同步；
- 增加内存占用与重绘开销；
- 违反 WCAG 可访问性原则（屏幕阅读器无法感知虚拟滚动条）。
? 真正有价值的增强方向
若需提升移动端滚动体验，建议转向以下更自然的方案：
- 使用 overscroll-behavior: contain 防止滚动穿透；
- 添加平滑滚动：scroll-behavior: smooth（iOS 15.4+ 全面支持）；
- 为长列表启用 contain: strict 提升渲染性能；
- 在关键锚点处提供「回到顶部」浮动按钮（带 position: sticky）。
总结：不是“如何让 iPhone 显示自定义滚动条”，而是“如何让滚动体验在 iPhone 上更自然、更高效”。 放下对桌面端样式的执念，拥抱触控优先的设计逻辑，才是现代 Web 开发的正确路径。
