移动端flip card正面触摸滚动时禁止iframe滚动的JS实现方案

直接通过监听触摸事件，在触摸正面期间临时禁用iframe的交互能力，以此阻止其跟随滚动，适配所有.flip-box-front元素的实现代码如下：

// 获取所有翻转卡片正面元素
const frontCards = document.querySelectorAll('.flip-box-front');

frontCards.forEach(frontCard => {
  // 触摸开始时禁用对应iframe的交互
  frontCard.addEventListener('touchstart', () => {
    // 找到当前卡片所属容器内的iframe
    const targetIframe = frontCard.closest('.flip-box').querySelector('iframe');
    if (targetIframe) {
      // 禁止iframe响应触摸事件，阻止滚动穿透
      targetIframe.style.pointerEvents = 'none';
      // 额外设置禁止滚动作为双重保险
      targetIframe.style.overflow = 'hidden';
    }
  });

  // 触摸结束后恢复iframe正常状态
  frontCard.addEventListener('touchend', () => {
    const targetIframe = frontCard.closest('.flip-box').querySelector('iframe');
    if (targetIframe) {
      targetIframe.style.pointerEvents = '';
      targetIframe.style.overflow = '';
    }
  });

  // 处理触摸被中断的情况（如来电、弹窗）
  frontCard.addEventListener('touchcancel', () => {
    const targetIframe = frontCard.closest('.flip-box').querySelector('iframe');
    if (targetIframe) {
      targetIframe.style.pointerEvents = '';
      targetIframe.style.overflow = '';
    }
  });
});

关键逻辑说明 #

1. 精准匹配iframe：通过closest('.flip-box')定位当前正面元素所属的翻转容器，确保只操作对应卡片内的iframe，不会影响其他卡片。
2. 临时禁用交互：在touchstart时设置pointerEvents: none让iframe完全不响应触摸事件，从根源阻止滚动触发；同时搭配overflow: hidden作为双重保险。
3. 恢复正常状态：在touchend和touchcancel事件中清除临时样式，保证卡片翻转后iframe能正常交互和滚动。

结构适配提示 #

如果你的翻转卡片DOM结构与示例不同（比如iframe不在.flip-box直接子节点下），只需调整querySelector('iframe')的选择器路径，核心逻辑保持不变即可。

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