嵌套在div中的iframe无法滚动问题求助

问题核心是：iframe作为独立的浏览器上下文，会捕获自身区域内的鼠标滚动事件，不会冒泡到外层div容器，导致只有点击padding区域才能触发滚动。以下是几种针对性的解决方案：

方案1：禁用iframe的鼠标事件（最简单，无iframe交互需求时用） #

给iframe添加pointer-events: none样式，让iframe忽略所有鼠标操作，事件会直接穿透到外层div，从而触发滚动。缺点是iframe内的所有交互（点击、输入等）都会失效。

代码示例：

<div style="height: 100vh; overflow-y: scroll; padding: 24px">
  <iframe src="..." style="height: 1500px; pointer-events: none" />
</div>

方案2：监听iframe滚动事件同步到外层（需同源，保留iframe交互） #

如果需要保留iframe的交互功能，可通过JavaScript监听iframe的滚轮事件，手动控制外层div的滚动位置。注意：此方法要求iframe与外层页面同源（同协议、域名、端口），否则会因跨域限制无法生效。

代码示例：

<div id="outerScrollContainer" style="height: 100vh; overflow-y: scroll; padding: 24px">
  <iframe id="contentIframe" src="..." style="height: 1500px" />
</div>

<script>
const outerContainer = document.getElementById('outerScrollContainer');
const iframe = document.getElementById('contentIframe');

// 等待iframe加载完成后绑定事件
iframe.addEventListener('load', () => {
  iframe.contentWindow.addEventListener('wheel', (event) => {
    event.preventDefault();
    // 根据滚轮方向更新外层容器的滚动距离
    outerContainer.scrollTop += event.deltaY;
  });
});
</script>

方案3：透明遮罩层切换滚动状态（无跨域限制，兼顾交互与滚动） #

通过一个透明遮罩层覆盖iframe，需要滚动时显示遮罩（捕获鼠标事件触发外层滚动），不需要时隐藏遮罩（恢复iframe交互）。可以通过按键、鼠标手势等触发遮罩的显示/隐藏。

代码示例：

<div style="height: 100vh; overflow-y: scroll; padding: 24px; position: relative;">
  <iframe src="..." style="height: 1500px" />
  <!-- 透明遮罩层，默认隐藏 -->
  <div id="scrollTriggerMask" style="position: absolute; inset: 24px; background: transparent; display: none;"></div>
</div>

<script>
const scrollMask = document.getElementById('scrollTriggerMask');

// 示例：按住Shift键显示遮罩，允许外层滚动；松开则隐藏，恢复iframe交互
document.addEventListener('keydown', (e) => {
  if (e.key === 'Shift') scrollMask.style.display = 'block';
});
document.addEventListener('keyup', (e) => {
  if (e.key === 'Shift') scrollMask.style.display = 'none';
});
</script>

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