javascript - 全屏视频不允许在 Firefox 上滚动

Question

我正在使用 fullscreen.js 脚本，在我的其中一个屏幕上我将有一个全屏 Vimeo 视频。显然，这会导致 FF 出现问题，并阻止我在到达视频屏幕后立即向上或向下滚动。该问题已提交到脚本的 GitHub 页面，但作者将其驳回，因为它是一个 FF 问题 (https://github.com/alvarotrigo/fullPage.js/issues/803)。

我将所有这些与基础 CSS 一起用于响应式视频:

<div class="flex-video widescreen vimeo"> 
    <iframe src="<?php the_sub_field('video') ?>" 
        width="400" 
        height="225" 
        frameborder="0" 
        webkitAllowFullScreen 
        mozallowfullscreen 
        allowFullScreen></iframe> 
</div>

错误是这个:https://bugzilla.mozilla.org/show_bug.cgi?id=779286但我没有看到它在 Mac 上的 FF 36 上得到解决。这个问题也没有发生在 chrome 上。

这是 GitHub 线程上其他人的问题示例:http://jsbin.com/tunove/1/edit?html,output

Answer 1

问题:

您正在查看的 Mozilla 错误实际上是指 the fullscreen mode API ，一个不相关的 API 已修复。我认为您正在寻找的错误报告是这个:

Bug 1084121 - Mouse wheel event is captured by iframe and not propogated.

Steps to reproduce:

I have a div in which I manually capture mousewheel events, and use that to scroll the div. Inside of this div, I have an embedded youtube video, in an iframe.

Actual results:

While scrolling, if the mouse is over the iframe, scrolling no longer works, because all mouse events, including mouse wheel events, are captured by the iframe, and are not sent to the parent window.

Expected results:

The mouse wheel event should have been propagated to the parent window. This is the behavior in chrome and safari.

Since the iframe is on a different domain, there does not appear to be any feasible workaround for this.

此错误报告仍处于公开状态，似乎并未在实现过程中。

此外，根据错误报告，此行为未由任何规范定义。

为了它的值(value)，我给这个错误报告投票以增加重要性。我同意，这是一个用户体验问题。

解决方法:

不幸的是，就直接修复 wheel 事件问题而言，GitHub 问题中的建议是关于我们对跨源 iframe 的所有建议。如果框架内容在同一个域中或在您的控制之下，您可以在 iframe 中添加另一个事件监听器，但是 Same-Origin Policy防止这种跨域。

防止 iframe 窃取跨源框架的 wheel 事件的唯一可用选项是:

• 用透明 div 覆盖大部分或全部 iframe。
• 使用pointer-events: none;在 iframe 上。这也将完全阻止点击视频，因此它与用透明 div 覆盖整个视频具有相同的效果。

其他选项:

这个问题显然仅限于 wheel事件，因为在 iframe 上滚动时可以滚动父文档。

<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E" style="width: 100%; height: 100px;"></iframe>

<div style="background: red; width: 20px; height: 5000px;"></div>

fullPage.js 不是这样构造的，但是如果 iframe 的父元素实际上是一个可滚动元素，则可以监听 scroll。事件并对此使用react。

有点不稳定，但这里有一个使用 scroll 事件而不是 wheel 事件的类似示例。

示例(JSFiddle):

var autoScrolling = false;
$('.wrap').on('scroll', function(e) {
    if (autoScrolling) {
        return;
    }
    //Get this element and find the number of children.
    var $this = $(this);
    var children = $this.children('.pane').length;
    //Find the height of each pane, and the current position.
    var paneHeight = this.scrollHeight / children;
    var position = this.scrollTop / paneHeight;
    var positionRound = Math.round(position);
    //Find the target position.
    var positionOff = position - positionRound;
    var toShow = null;
    if (positionOff < 0) {
        toShow = positionRound - 1;
    }
    else if (positionOff > 0) {
        toShow = positionRound + 1;
    }
    //If scrolling to a new pane, find the next one.
    if (toShow !== null) {
        autoScrolling = true;
        $this.animate({
            scrollTop: paneHeight * toShow
        }, {
            duration: 1000,
            complete: function() {
                setTimeout(function() {
                    autoScrolling = false;
                }, 500);
            }
        });
    }
});

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.wrap {
    height: 100%;
    width: 100%;
    overflow: auto;
}
.pane {
    width: 100%;
    height: 100%;
    position: relative;
}
iframe {
    background: white;
    border: 0;
    outline: 0;
    display: block;
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="wrap">
    <div class="pane" style="background: red;">
        <iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
    </div>
    <div class="pane" style="background: green;">
        <iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
    </div>
    <div class="pane" style="background: blue;">
        <iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
    </div>
</div>