iOS 11.3下overflow弹跳阻止失效求助：preventDefault方案不再生效

我之前也踩过iOS 11.3这个坑！当时突然发现全局阻止页面弹跳的代码完全失效，查了苹果的文档才明白是系统触摸事件规则改了。下面给你详细拆解问题和可行的解决方案：

苹果在iOS 11.3版本中调整了touchmove事件的默认行为拦截逻辑：

• 此前直接在document上调用event.preventDefault()就能全局阻止页面弹性弹跳，但新版本中，只有当触摸目标是可滚动容器（比如设置了overflow: scroll/auto的元素），且该容器已经滚动到顶部/底部边界时，preventDefault()才会生效。
• 如果触摸的是不可滚动元素，或者可滚动容器还没到边界，浏览器会直接忽略preventDefault()，依然触发页面级的弹性弹跳。

根据不同的业务场景，有几种靠谱的实现方式：

1. CSS全局禁用（适合无内部滚动的页面） #

用touch-action CSS属性直接告诉浏览器不需要处理触摸滚动行为，比JS方案更高效：

html, body {
  touch-action: none;
}

⚠️ 注意：如果页面内有需要滚动的元素，要给它们单独设置允许滚动的规则，比如：

.scrollable-container {
  touch-action: pan-y; /* 允许垂直方向滚动 */
}

2. JS精准拦截（保留内部滚动的场景） #

这种方案会判断触摸目标是否为可滚动容器，以及是否到达滚动边界，再决定是否阻止默认行为，既阻止页面弹跳，又不影响内部元素滚动：

document.addEventListener('touchmove', function(e) {
  const target = e.target;
  // 检查目标元素是否是可滚动容器
  const isScrollable = target.scrollHeight > target.clientHeight && 
                       window.getComputedStyle(target).overflowY !== 'hidden';

  if (isScrollable) {
    // 判断是否滚动到顶部或底部边界
    const isAtTop = target.scrollTop === 0;
    const isAtBottom = target.scrollTop + target.clientHeight === target.scrollHeight;

    // 当在边界继续滑动时，阻止默认行为避免页面弹跳
    if ((e.deltaY > 0 && isAtBottom) || (e.deltaY < 0 && isAtTop)) {
      e.preventDefault();
    }
  } else {
    // 非可滚动元素，直接阻止默认行为
    e.preventDefault();
  }
}, { passive: false }); // 必须设置passive: false，否则preventDefault会被浏览器忽略

⚠️ 关键提醒：passive: false是必填项，因为现代浏览器默认touchmove事件监听器是passive模式，不允许调用preventDefault()，必须显式关闭这个设置。

3. 用overscroll-behavior（iOS 13+最优解） #

如果你的用户群体主要是iOS 13及以上版本，可以用CSS的overscroll-behavior属性，简洁又高效：

body {
  overscroll-behavior: none; /* 完全禁用页面弹性弹跳 */
  /* 或者仅禁用垂直方向：overscroll-behavior-y: none; */
}

这个属性不会影响页面内部可滚动元素的滚动行为，是目前最推荐的方案，唯一限制是兼容性（iOS 13才支持）。

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