overflow: scroll 不算手势识别,因为它仅触发 scroll 事件,不提供起点/终点坐标、速度、加速度、多点触控等数据,无法区分滑动意图,且可能被 touch-action 阻断;手势识别必须依赖 touchstart/touchmove/touchend 事件流来主动解析原始指针轨迹。

不能。HTML原生滑动(如 overflow: scroll 或 touch-action: pan-y)只是浏览器默认的滚动行为,它不提供手势意图识别能力,也无法区分“滑动提交”“左滑删除”“长按拖拽”等语义化操作。
为什么overflow: scroll不算手势识别
它只触发 scroll 事件,不暴露起点/终点坐标、速度、加速度、多点触控状态等关键数据;无法判断是用户想翻页,还是误触想拖拽表单字段;iOS Safari 下还可能被 touch-action 阻断,导致 touchstart 根本不触发。
-
scroll是被动响应,手势识别是主动解析原始指针轨迹 - 你监听不到
touchstart的e.touches[0].identifier,就无法跟踪单指/多指生命周期 - 没有
touchmove坐标流,就无法计算滑动方向、距离、速率,更没法做防抖或阈值过滤
touchstart/touchmove/touchend 才是手势识别基础
所有可靠的手势逻辑都建立在这三个事件之上。比如识别左滑:
- 在
touchstart记录e.touches[0].clientX - 在
touchmove持续更新位移差,但不立即响应(避免误判) - 在
touchend判断Math.abs(deltaX) > 50 && Math.abs(deltaY) 才算有效左滑 - 全程要小心:别在
input或textarea上e.preventDefault(),否则键盘不弹
哪些场景必须绕过原生滑动,自己实现
当交互需要语义判断时,原生滚动完全不够用:
立即学习“前端免费学习笔记(深入)”;
- 表单内“左滑提交”——需在
touchend后调用form.submit(),而不是触发scroll - 列表项“右滑呼出操作菜单”——要阻止默认滚动,同时保留上下滑动浏览能力
- 双指缩放图片——依赖
e.touches.length === 2和两点距离变化率,overflow完全无感知 - 长按拖拽排序——得用
setTimeout+touchmove轨迹校验,不是scroll能覆盖的
真正难的不是写 touchstart,而是平衡:既要捕获足够原始数据,又不能干扰文本框聚焦、页面滚动、系统选中等原生行为。很多 bug 都出在 preventDefault() 调用时机和范围上——比如在 form 元素上全局禁用,结果连 submit 都被拦掉了。



















