全屏视频不允许在 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.

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

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

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

解决方法：

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

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

用透明 divs 覆盖大部分或全部 iframe。
在 iframe 上使用 pointer-events: none;。这也将完全阻止点击视频，因此它与用透明 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 事件并对其做出反应。

有点不稳定，但这里有一个使用 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>

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

Fullscreen video doesn't allow scrolling on firefox

javascript

css

firefox

scroll

mousewheel

问题：

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

解决方法：

其他选项：

示例 (JSFiddle):