如何阻止滚动事件通过 iframe 直到 iframe 处于活动状态？答案

【问题标题】：How to block scroll event passing through to iframe until iframe is active?如何阻止滚动事件通过 iframe 直到 iframe 处于活动状态？
【发布时间】：2019-08-17 00:54:26
【问题描述】：

我有一个长滚动页面。在这个滚动页面上是一个 iframe，它有一个媒体应用程序，该应用程序具有在接收到滚动事件时放大和缩小的媒体。

如果用户使用鼠标滚轮滚动父页面，最终他们将点击 iframe，在这种情况下页面将停止滚动并且 iframe 将放大到媒体应用程序很远。

如果我为 iframe 禁用鼠标事件，那么用户将永远无法放大或点击媒体应用程序。

有没有办法阻止 iframe 上的默认滚动操作，并且只在 iframe 处于活动状态时发生？

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以使用以下步骤：

将iframe 包裹在div 元素中。您不能使用 iframe 的 onclick 方法。
在父 div 元素上触发事件（单击、鼠标活动）时更改 iframe 元素的 pointer-events 属性。

这里是 JQuery 示例：

    $('#iframeContainer').on('click', function(event) {
        $('#iframe').css('pointer-events', 'auto');
    });

    $('#iframeContainer').mouseleave(function(event) { 
        $('#iframe').css('pointer-events', 'none'); 
    });

【讨论】：

非常聪明。完美运行。谢谢。

【解决方案2】：

没有测试，我发现有两种方法可以解决这个问题

1) 为 iframe 赋予 css 值 pointer-events: none; 并在其处于活动状态时将值设置回 auto

iframe {
    pointer-events: none;
}
iframe:active {
    pointer-events: auto;
}

2) 通过 JavaScript 移除 iframe 的事件监听器，并在 iframe 处于活动状态时再次绑定它们。

【讨论】：