移动端触摸含图片轮播的iframe区域无法滚动页面问题求助

该问题的核心原因是iframe内部的图片轮播组件拦截了纵向触摸事件，导致事件无法冒泡到父页面触发滚动，可根据实际场景选择以下修复方案：

方案1：CSS快速适配（仅修改父页面代码即可） #

给iframe增加外层包裹容器，添加如下CSS规则即可适配：

.iframe-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.iframe-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

如果iframe内部不需要上下滚动，可额外给iframe内页面的html、body标签设置overflow-y: hidden，避免纵向滚动事件被内部误拦截。如果iframe完全不需要交互，还可以给iframe添加pointer-events: none属性直接透传所有触摸事件。

方案2：JS事件透传（保留iframe内部交互能力） #

如果需要保留iframe内轮播的左右滑动能力，可在父页面添加如下监听逻辑，判断滑动方向为纵向时主动触发父页面滚动：

let touchStartY = 0;
const targetIframe = document.querySelector('iframe');

targetIframe.addEventListener('touchstart', e => {
  touchStartY = e.touches[0].clientY;
}, { passive: true });

targetIframe.addEventListener('touchmove', e => {
  const moveY = e.touches[0].clientY - touchStartY;
  const moveX = e.touches[0].clientX - (e.touches[0].clientX || 0);
  // 判定为纵向滑动时主动触发父页面滚动
  if (Math.abs(moveY) > Math.abs(moveX)) {
    window.scrollBy(0, -moveY);
  }
}, { passive: false });

方案3：iframe内部适配（可控制iframe源码时优先使用） #

如果可以修改iframe内的页面代码，直接在iframe内部添加如下逻辑，仅拦截必要的轮播滑动事件即可：

document.body.addEventListener('touchmove', e => {
  const isVerticalScroll = Math.abs(e.deltaY) > Math.abs(e.deltaX);
  const noInnerScroll = document.scrollingElement.scrollHeight <= document.scrollingElement.clientHeight;
  // 纵向滑动且内部无滚动空间时不拦截事件，允许冒泡到父页面
  if (isVerticalScroll && noInnerScroll) return;
  e.stopPropagation();
}, { passive: false });

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