为何在iframe元素上方无法触发wheel滚轮事件？

• 事件冒泡边界限制：iframe是独立的浏览上下文，鼠标滚轮落在iframe可视区域内触发的wheel事件，事件目标属于iframe内部的独立文档对象，不会沿DOM树冒泡到外层父页面。不管是自研的切页逻辑还是PagePilingJS，默认都将wheel事件监听器绑定在父页面的window或外层滚动容器上，无法捕获到发生在iframe区域的滚轮事件，自然无法触发切页动作。
• 空iframe同样存在事件拦截：初始渲染的未设置src的空iframe，浏览器会自动为其生成独立的同源空文档，只要鼠标悬停在iframe区域内滚动，事件会直接被这个内部空文档拦截，和是否加载实际业务内容无关，这也是首屏仅加载空iframe时问题依然复现的原因。
• 跨域场景的权限限制：如果后续为iframe加载跨域内容，父页面受同源策略限制，无法直接访问iframe内部的document对象，也就无法直接监听内部的滚动事件，这也是绝大多数全屏滚动插件默认不兼容内嵌iframe场景的根本原因。

• 基础兼容方案：给所有非当前激活状态的iframe设置pointer-events: none样式，让鼠标事件直接穿透iframe落到外层父容器，保证非激活页不会拦截滚轮事件；仅给当前展示的激活标签页内的iframe移除该属性，允许用户和iframe内容正常交互。该方案无需额外事件通信，对同源、跨域iframe均生效，实现成本最低。
• 进阶交互方案：如果需要用户在激活态的iframe内滚动到边界（顶部/底部）后继续滚动触发切页，同源场景可直接给iframe内部document绑定wheel事件，判断滚动边界后手动触发父页面的切页逻辑；跨域场景需要通过postMessage做双向通信，由iframe内部将滚动边界状态通知父页面，再触发切页动作。
• 不推荐使用透明遮罩层覆盖iframe的方案，该方案会完全阻断用户和iframe内元素的所有交互，可用性极差。

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