The Issue:
The Mozilla bug you are looking at actually refers to the fullscreen mode API, an unrelated API that was fixed. I think the bug report you are looking for is this one:
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.
This bug report is still open, and does not appear to be in the process of being implemented.
Also, according to the bug report, this behavior is not defined by any specification.
For what it's worth, I gave this bug report a vote to increase the importance. I agree, this is a user experience problem.
Workarounds:
Unfortunately, as far as directly fixing the wheel event issue goes, the suggestions in that GitHub issue are about all we have for cross-origin iframes. If the framed content were on the same domain or otherwise under your control, you could add another event listener inside the iframe, but Same-Origin Policy prevents this cross-domain.
The only options available to prevent the iframe from stealing the wheel events for cross-origin frames are:
- Cover most or all of the iframe with transparent divs.
- Use
pointer-events: none; on the iframe. This will also prevent clicking on the video at all, so it has the same effect as covering the entire video with a transparent div.
Other Options:
This issue is apparently limited to the wheel events as it is possible to scroll a parent document while scrolling over an 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 is not structured this way, but if a parent element to the iframe were actually a scrollable element, it would be possible to listen for the scroll event and react to that.
It's a little shaky, but here's an example of something similar using the scroll event instead of the wheel event.
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>
