Safari触摸事件阻止及页面边界滑动问题求解

嘿，针对你遇到的两个Safari触摸交互相关问题，我结合实际开发经验来给你梳理下可行的解决方案：

要在Safari里阻止触摸事件，核心是正确调用preventDefault()，但要注意Safari的事件默认行为配置：

• 全局阻止（谨慎使用）：如果需要全局禁用触摸相关的默认行为，可以在touchstart或touchmove事件上绑定处理函数，并且必须设置{ passive: false }——因为Safari默认会将部分触摸事件标记为passive，此时preventDefault()会被忽略：

  document.addEventListener('touchstart', (e) => {
    // 可根据需求添加判断条件，比如仅在特定场景下阻止
    e.preventDefault();
  }, { passive: false });
  

• 精准阻止特定元素：如果只需要禁用某个元素的触摸事件，直接给目标元素绑定事件即可，同样要注意passive配置：

  const targetEl = document.querySelector('.your-target-element');
  targetEl.addEventListener('touchmove', (e) => {
    e.preventDefault();
  }, { passive: false });
  

这个情况确实是Safari的默认浏览器行为，官方称之为「弹性滚动（Bounce Scroll）」，Chrome没有这个原生特性，所以不会出现类似问题。下面是几种有效的解决思路：

方案一：用CSS overscroll-behavior 直接禁用（推荐） #

Safari 13.1及以上版本支持overscroll-behavior属性，它专门用来控制滚动到边界后的行为，设置为none即可禁用弹性滚动：

html, body {
  overflow: hidden;
  overscroll-behavior: none; /* 彻底禁用页面边界的弹性滑动 */
}

⚠️ 注意：如果页面内有需要正常滚动的容器（比如弹窗、滚动列表），要给这些容器单独设置overscroll-behavior: auto;，避免影响内部滚动功能。

方案二：JavaScript精准拦截（兼容低版本Safari） #

如果需要兼容更早版本的Safari，或者想要更精细的控制（比如只阻止边界滑动，不影响正常滚动），可以通过判断滚动位置来拦截：

let startTouchY = 0;

// 记录触摸开始时的Y坐标
document.addEventListener('touchstart', (e) => {
  startTouchY = e.touches[0].clientY;
}, { passive: true });

// 触摸移动时判断滚动状态
document.addEventListener('touchmove', (e) => {
  const currentTouchY = e.touches[0].clientY;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const maxScrollTop = document.documentElement.scrollHeight - document.documentElement.clientHeight;

  // 已经滚动到顶部，且手指向下滑动（触发弹性滚动的动作）
  if (scrollTop <= 0 && currentTouchY > startTouchY) {
    e.preventDefault();
  }
  // 已经滚动到底部，且手指向上滑动（触发弹性滚动的动作）
  if (scrollTop >= maxScrollTop && currentTouchY < startTouchY) {
    e.preventDefault();
  }
}, { passive: false });

这个方法的优势是不会干扰页面内部的正常滚动，仅拦截边界的弹性滑动。

方案三：动态类控制（场景化禁用） #

如果只需要在特定场景下禁用弹性滚动（比如弹窗弹出时），可以给html/body添加动态类：

.no-bounce {
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed; /* 同时固定页面，防止背景滚动 */
  width: 100%;
}

然后在需要禁用时通过JavaScript添加这个类，恢复时移除即可。

内容的提问来源于stack exchange，提问作者blastz