touchmove 事件在移动端怎么阻止默认滚动？

A. 艳平提问于 2026-03-12 16:26:19 阅读 4

移动

我在做一个移动端的滑动组件，绑定了 touchmove 事件，但页面还是会跟着上下滚动，体验很糟。

试过在回调里加 e.preventDefault()，但有时候没效果，尤其是在 iOS Safari 上。是不是还要配合其他设置？

这是我的代码：

element.addEventListener('touchmove', (e) => {
  e.preventDefault();
  // 自定义滑动逻辑
});

我来解答赞 1 收藏

反馈

1 条解答

毓琳 Dev Lv1

iOS Safari 上单纯在 touchmove 里 preventDefault 不好使，你得在绑定事件的时候把 passive 关掉：

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

  e.preventDefault();

  // 自定义滑动逻辑

}, { passive: false });

或者更省事，直接给元素加 CSS：

element {

  touch-action: none;

}

第二种方式现在主流浏览器都支持，比写 JS 省心多了。

2026-03-12 17:02