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

Question

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

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

如果我禁用 iframe 的鼠标事件，则用户永远无法放大或单击媒体应用程序。

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

标签： javascripthtml

Answer 1

您可以使用以下步骤：

1. 包裹你的iframe内部div元素。您不能使用onclickiframe 的方法。
2. 在父元素上触发事件（单击、鼠标活动）时更改元素pointer-events的属性。iframediv

这是 JQuery 示例：

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

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