如何让iframe响应点击但忽略父页面的滚动传递？

因为你同时控制父页面和iframe内容，以下几种方案都能实现「允许点击iframe，但父页面滚动时不被iframe抢占」的需求：

方案1：iframe内部拦截滚动事件（最精准） #

在iframe的脚本中监听滚动相关事件，只有当iframe内容没到边界时才允许自身滚动，否则把滚动权交还给父页面：

// iframe内部代码
window.addEventListener('wheel', (e) => {
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = document.documentElement.clientHeight;
  
  // 判断是否滚动到顶部/底部
  const isTop = scrollTop === 0;
  const isBottom = scrollTop + clientHeight >= scrollHeight;

  // 如果已经到边界，且滚动方向继续往边界走，就阻止iframe滚动，通知父页面继续
  if ((isTop && e.deltaY < 0) || (isBottom && e.deltaY > 0)) {
    e.preventDefault();
    e.stopPropagation();
    // 可选：通知父页面继续滚动
    window.parent.postMessage({ type: 'forwardScroll', delta: e.deltaY }, '*');
  }
});

父页面可选接收消息继续滚动：

// 父页面代码
window.addEventListener('message', (e) => {
  if (e.data.type === 'forwardScroll') {
    window.scrollBy(0, e.data.delta);
  }
});

方案2：父页面用遮罩层拦截滚动（无需修改iframe） #

给每个iframe加一个透明遮罩层，父页面滚动时让遮罩层拦截滚动事件，滚动停止后恢复点击：

/* 父页面CSS */
.iframe-wrap {
  position: relative;
  width: 100%;
  height: 500px; /* 匹配iframe高度 */
}
.iframe-wrap iframe {
  width: 100%;
  height: 100%;
}
.scroll-blocker {
  position: absolute;
  inset: 0;
  pointer-events: none; /* 默认不拦截点击 */
}
.iframe-wrap.scrolling .scroll-blocker {
  pointer-events: auto; /* 滚动时拦截滚动 */
}

// 父页面JS
const iframeWraps = document.querySelectorAll('.iframe-wrap');
let scrollTimer;

window.addEventListener('scroll', () => {
  iframeWraps.forEach(wrap => wrap.classList.add('scrolling'));
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(() => {
    iframeWraps.forEach(wrap => wrap.classList.remove('scrolling'));
  }, 100);
});

// 遮罩层拦截滚动，让父页面继续滚动
document.querySelectorAll('.scroll-blocker').forEach(blocker => {
  blocker.addEventListener('wheel', (e) => {
    e.preventDefault();
    window.scrollBy(0, e.deltaY);
  });
});

方案3：动态切换iframe的滚动属性（简单粗暴） #

利用scrolling属性（或CSS overflow）动态禁用/启用iframe滚动：

// 父页面代码
const iframes = document.querySelectorAll('iframe');
let scrollTimer;

window.addEventListener('scroll', () => {
  // 父页面滚动时禁用iframe滚动
  iframes.forEach(iframe => {
    iframe.setAttribute('scrolling', 'no');
    // 或者用CSS：iframe.style.overflow = 'hidden';
  });
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(() => {
    // 滚动停止后恢复iframe滚动
    iframes.forEach(iframe => {
      iframe.setAttribute('scrolling', 'yes');
      // iframe.style.overflow = 'auto';
    });
  }, 150);
});

注意：scrolling属性已在HTML5废弃，但主流浏览器仍兼容，用CSS overflow更规范。

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