我正在使用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，输出
您正在查看的Mozilla错误实际上是指全屏模式API，这是已修复的不相关API。我认为您正在寻找的错误报告就是这样的：
重现步骤：
我有一个div，其中我手动捕获了鼠标滚轮事件，并使用它来滚动div。在这个div内部，我在iframe中嵌入了一个youtube视频。
实际结果：
滚动时，如果鼠标悬停在iframe上，则滚动将不再起作用，因为所有鼠标事件（包括鼠标滚轮事件）都由iframe捕获，并且不会发送到父窗口。
预期成绩：
鼠标滚轮事件应该已经传播到了父窗口。这是Chrome和Safari浏览器的行为。
由于iframe位于其他域上，因此似乎没有任何可行的解决方法。
该错误报告仍处于打开状态，似乎没有正在实施中。
另外，根据错误报告，此行为未由任何规范定义。
对于它的价值，我投票给这个错误报告以增加重要性。我同意，这是用户体验问题。
不幸的是，就直接解决wheel事件问题而言，该GitHub问题中的建议是关于跨域iframe的所有建议。如果框架内容位于同一域中或由您控制，则可以在iframe中添加另一个事件侦听器，但“同源策略”会阻止此跨域。
防止iframe窃取wheel跨域框架事件的唯一可用选项是：
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事件并对此做出反应。
有点不稳定，但这是使用scroll事件而不是wheel事件的类似示例。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句