移动端手势滑动时页面跟着滚动怎么解决？

Designer°国娟提问于 2026-02-12 09:08:31 阅读 33

移动

我在开发一个支持左右滑动切换卡片的移动端页面，用touchstart和touchmove事件检测手势位移，但发现当手指滑动距离较大时页面会跟着滚动，导致手势识别不准。试过在touchmove里加e.preventDefault()，但这样完全阻止滚动后又无法正常上下滚动页面了。

代码大概是这样的：


let startX;
element.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});
element.addEventListener('touchmove', (e) => {
  const currentX = e.touches[0].clientX;
  const distance = startX - currentX;
  // 这里想根据distance触发滑动效果，但页面还是在滚动
});

有什么办法既能检测水平滑动手势，又不影响页面垂直方向的正常滚动呢？

我来解答赞 3 收藏

反馈

1 条解答

Zz张豪 Lv1

只在水平滑动时阻止默认行为。

element.addEventListener('touchmove', (e) => {

  const dx = Math.abs(e.touches[0].clientX - startX);

  const dy = Math.abs(e.touches[0].clientY - startY);

  if (dx > dy) e.preventDefault(); // 水平为主，阻止滚动

});

就这样。

2026-02-12 09:11