iOS touchmove动画卡顿主因是默认滚动延迟与事件节流，非性能差；需设touch-action、preventDefault()、passive:false，并用raf批处理transform。
为什么 iOS 上 touchmove 动画卡顿
根本原因不是「iOS 性能差」，而是 touchmove 默认会触发页面滚动（scroll），浏览器在等待你是否要滚动，从而对事件做了 300ms 左右的延迟判定；同时，requestAnimationFrame 回调若和未阻止默认行为的 touchmove 混用，容易被系统节流或降帧。
常见现象包括：手指滑动时动画跳变、响应滞后、突然掉帧、松手后还惯性抖动。
- 未调用
event.preventDefault()—— 尤其在需要自定义拖拽/轮播等场景下，不阻止会导致滚动与动画争抢控制权 - 在
touchmove里直接修改style.transform—— 每次都触发重排重绘，iOS WebKit 渲染管线压力大 - 用
setTimeout或普通while循环驱动动画 —— 完全脱离渲染帧节奏，无法匹配 60fps
必须加的 CSS 属性：touch-action
touch-action 是 iOS 13+ 和 Safari 13.1+ 的关键开关，它比 preventDefault 更早介入手势识别，能从根本上避免滚动延迟。
根据使用场景选值：
立即学习“前端免费学习笔记（深入）”；
- 仅水平拖拽（如轮播图）：
touch-action: pan-y;—— 允许竖向滚动，禁止横向滚动，让touchmove立即触发 - 纯拖拽平移（如画布移动）：
touch-action: none;—— 完全接管所有触摸方向，但务必确保你已实现滚动逻辑替代 - 禁用所有原生手势（慎用）：
touch-action: manipulation;—— 仅保留双击缩放和滚动，适合阅读类页面
注意：该属性需加在**监听 touchmove 的元素本身**，父容器设了无效。
用 requestAnimationFrame + getBoundingClientRect() 做平滑位移
不要在 touchmove 里直接改样式。应只记录坐标，把 DOM 更新交给 requestAnimationFrame 批处理。
示例核心逻辑：
let lastX = 0;
let isAnimating = false;
<p>element.addEventListener('touchstart', e => {
lastX = e.touches[0].clientX;
});</p><p>element.addEventListener('touchmove', e => {
const x = e.touches[0].clientX;
const diff = x - lastX;
lastX = x;</p><p>// 只更新数据，不操作 DOM
state.offset += diff;</p><p>if (!isAnimating) {
isAnimating = true;
requestAnimationFrame(() => {
element.style.transform = <code>translateX(${state.offset}px)</code>;
isAnimating = false;
});
}
});
这样做的好处：
- 避免多次
touchmove触发重复raf，减少调度开销 - 强制所有样式变更对齐屏幕刷新节奏，iOS WebKit 能更好优化图层合成
- 配合
will-change: transform;可进一步提示 GPU 加速（但别滥用）
iOS 特有坑：passive: false 必须显式声明
Safari 对 touchstart/touchmove 的 passive 默认为 true（即不可调用 preventDefault），哪怕你写了也会被忽略 —— 这是 iOS 15.4+ 开始的严格策略。
所以，添加事件监听时必须写明：
element.addEventListener('touchmove', handler, { passive: false });
否则 event.preventDefault() 在 iOS 上完全失效，touch-action 也救不了。
顺带提醒：passive: false 会带来轻微滚动延迟（因为浏览器要等 JS 执行完才能决定是否滚动），所以只在真正需要拦截的元素上设置，别全局挂。
最易被忽略的是：这个选项不能靠 CSS 或其他 API 补救，漏写就等于白做前面所有优化。
