webkit-overflow-scrolling: touch 能缓解 ios 滚动卡顿，是因为它强制启用 gpu 加速的独立滚动线程，绕过主线程阻塞；需满足 overflow 显式设置、固定高度、无干扰层叠上下文三条件。
为什么 webkit-overflow-scrolling: touch 能缓解 iOS 滚动卡顿
iOS Safari 默认对非全屏滚动容器（比如 div 内的可滚动区域）使用“合成层禁用”策略：滚动由主线程处理，一旦 JS 或样式计算阻塞，就会掉帧。加上 iOS 早期 WebKit 对 overflow: auto/scroll 的滚动优化不足，容易出现滑动生涩、回弹迟滞、甚至完全卡死。
webkit-overflow-scrolling: touch 的作用是**强制启用原生滚动加速层（即 GPU 加速的独立滚动线程）**，让该容器获得类似 body 级别的滚动体验。它不是“修复 bug”，而是绕过默认的低效路径，交由系统级触控子系统接管。
必须配合的 DOM 结构与 CSS 条件
这个属性不会单独生效，以下三点缺一不可：
-
overflow-y或overflow-x必须显式设为auto或scroll（不能是visible或未设置） - 元素需有明确的、非
auto的高度或最大高度（例如height: 300px、max-height: 400px），否则无法触发滚动条和滚动行为 - 父容器不能有
transform、will-change或opacity等会创建新层叠上下文且干扰滚动合成的属性（尤其注意transform: translateZ(0)旧式 hack 会破坏它）
iOS 15+ 中该属性已被弃用，但仍有实际价值
苹果在 WebKit 15.4 后标记 webkit-overflow-scrolling 为 deprecated，官方建议改用 overscroll-behavior 和更现代的滚动 API。但实测发现：
- iOS 16–18.7.7（含最新
iOS 18.7.7正式版）仍完整支持该属性，且在老机型（如 iPhone 11/12）上效果明显 - 移除后，部分复杂列表页（含大量图片、内联 SVG 或频繁重排的
position: absolute子元素）滚动帧率会从 60fps 掉到 30–40fps - 若你已用
scroll-snap-type或contain: paint做了滚动优化，再加webkit-overflow-scrolling: touch可能引发冲突，需实测验证
容易被忽略的兼容性陷阱
这个属性只在 iOS Safari 和部分 WKWebView 场景下起作用，Android Chrome、桌面 Safari、Firefox 完全无视它。所以写法必须带前缀且做降级：
.scroll-container {
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 仅 iOS 生效 */
/* 不要写成：overflow-scrolling: touch（无效） */
}
另外，它无法解决因 JavaScript 长任务阻塞主线程导致的卡顿——比如滚动中执行大量 getBoundingClientRect() 或未节流的 scroll 事件监听。这类问题得靠 IntersectionObserver 或 requestIdleCallback 拆解逻辑。
真正影响体验的，往往是“以为加了就万事大吉”，却没检查高度约束、没清理父层 transform、也没测 iOS 18.7.7 下是否和你的轮播组件产生合成层竞争。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
