如何禁止iframe自身滚动且保留点击功能，滚动时触发父级滚动

完全可以实现该需求，不需要禁用iframe的所有指针事件，以下是可落地的实现方案：

方案1：父页面直接监听iframe滚动事件（推荐，无需修改iframe内部代码） #

该方案兼容性覆盖PC、移动端，且iframe内部的所有点击、输入等交互逻辑完全不受影响：

• 父页面添加如下JS代码即可：

const targetIframe = document.querySelector('iframe');
// 适配PC端滚轮滚动
targetIframe.addEventListener('wheel', (e) => {
  // 将滚动增量同步到父页面
  window.scrollBy({
    top: e.deltaY,
    left: e.deltaX,
    behavior: 'auto'
  });
  // 阻止iframe自身的滚动默认行为
  e.preventDefault();
}, { passive: false });

// 适配移动端触摸滚动
let touchStartY = 0;
targetIframe.addEventListener('touchstart', (e) => {
  touchStartY = e.touches[0].clientY;
}, { passive: true });

targetIframe.addEventListener('touchmove', (e) => {
  const deltaY = touchStartY - e.touches[0].clientY;
  window.scrollBy({
    top: deltaY,
    behavior: 'auto'
  });
  e.preventDefault();
}, { passive: false });

注意passive: false是必须配置项，否则部分浏览器会禁止你调用e.preventDefault()。

方案2：同域iframe专属方案 #

如果你的iframe和父页面符合同源策略，也可以直接在iframe内部监听滚动事件，通知父页面执行滚动：

• iframe内部添加如下JS代码：

// PC端滚轮逻辑
window.addEventListener('wheel', (e) => {
  parent.window.scrollBy(e.deltaX, e.deltaY);
  e.preventDefault();
}, { passive: false });

// 移动端触摸滚动逻辑和方案1一致，只需将滚动执行对象换成parent.window即可

方案3：兼容极端场景的遮罩层方案 #

如果遇到部分老旧浏览器不支持iframe事件冒泡的场景，可以在iframe外层套一个透明的遮罩层，专门处理滚动事件，点击事件手动透传给iframe：

• 父页面HTML结构：

<div class="iframe-wrapper">
  <div class="iframe-mask"></div>
  <iframe src="xxx"></iframe>
</div>

• 父页面CSS：

.iframe-wrapper {
  position: relative;
}
.iframe-mask {
  position: absolute;
  inset: 0;
  background: transparent;
}

• 父页面JS逻辑：

const mask = document.querySelector('.iframe-mask');
// 处理滚动逻辑
mask.addEventListener('wheel', (e) => {
  window.scrollBy(e.deltaX, e.deltaY);
  e.preventDefault();
});
// 点击事件透传给iframe
mask.addEventListener('click', (e) => {
  mask.style.pointerEvents = 'none';
  const clickTarget = document.elementFromPoint(e.clientX, e.clientY);
  clickTarget?.click();
  mask.style.pointerEvents = 'auto';
});

注意事项 #

你之前使用的pointer-events: none会直接禁用iframe的所有指针交互，必然会导致点击事件失效，不建议用该属性实现滚动穿透需求。

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