如何禁用iPad Safari中网页间的边缘滑动切换功能？

这个问题确实是iOS网页开发里的老难题了——毕竟边缘滑动是Safari的系统级交互，早年确实几乎没有可行的办法，但随着iOS版本更新，现在有几个可以尝试的方案，不过都有一定局限性，咱们一个个说：

1. 使用CSS overscroll-behavior-x 属性 #

从iOS 13开始，Safari支持了overscroll-behavior属性，这个属性可以控制滚动到容器边缘时的行为，用来阻止滚动事件传递到父元素（包括系统级的边缘滑动）。你可以尝试给页面的根容器或者整个页面设置：

html, body {
  overscroll-behavior-x: none;
  /* 如果页面需要纵向滚动，保留纵向的滚动行为 */
  overscroll-behavior-y: auto;
}

注意：这个方案只在iOS 13及以上版本生效，而且如果页面本身没有可滚动的内容，可能效果会打折扣。

2. 精准拦截边缘触摸事件 #

之前你尝试的touchstart/touchmove拦截无效，可能是因为没有精准判断触摸位置，或者事件的passive属性设置不对。你可以试试这样的代码：

document.addEventListener('touchstart', function(e) {
  // 判断触摸点是否在屏幕左右边缘（这里设20px的阈值，可调整）
  const touch = e.touches[0];
  if (touch.clientX <= 20 || touch.clientX >= window.innerWidth - 20) {
    // 阻止事件传递和默认行为，注意要设置passive: false才能调用preventDefault
    e.preventDefault();
    e.stopPropagation();
  }
}, { passive: false });

document.addEventListener('touchmove', function(e) {
  const touch = e.touches[0];
  if (touch.clientX <= 20 || touch.clientX >= window.innerWidth - 20) {
    e.preventDefault();
    e.stopPropagation();
  }
}, { passive: false });

这个方法的思路是只拦截边缘区域的触摸事件，避免影响页面中间区域的正常交互。不过要注意：iOS Safari的事件捕获机制可能会优先处理系统级滑动，极端情况下还是可能失效，而且如果页面有横向滚动需求，这个方法会冲突。

3. 结合touch-action和容器滚动 #

如果你的页面是在一个固定的可滚动容器里，可以给容器设置touch-action: pan-y，同时配合overscroll-behavior-x: none：

.scroll-container {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 保持iOS的弹性滚动 */
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

这个方案适合单页应用或者内容在特定容器内滚动的场景，能减少系统滑动触发的概率。

重要提醒 #

不管用哪种方法，都没办法100%禁用系统级的边缘滑动——苹果一直限制网页修改系统核心交互，尤其是全屏模式下，系统滑动的优先级还是很高。如果你的需求是必须完全禁用，可能只能考虑用PWA（渐进式Web应用）添加到主屏幕，在独立模式下部分场景下系统滑动会被弱化，但也不是绝对的。

内容的提问来源于stack exchange，提问作者ᴇʟᴇᴠᴀтᴇ