Prevent parent page from scrolling when mouse is over embedded iframe in Firefox

Question

...without limiting the scroll inside the iframe or the need to specifically name/tag all scrollable elements.

Imagine google maps widget embedded i

Answer 1

Given all the prerequisites, I think the following is the sanest way to make this work in Firefox.

Wrap your iframe with a div which is a little bit shorter to enable vertical scrolling in it:

Now you can center the iframe vertically and re-position it every time the wrapper receives a scroll event (it will occur when a user tries to scroll away at frame edges):

var topOffset = 3;

wrapper.scrollTop(topOffset);

wrapper.on("scroll", function(e) {
    wrapper.scrollTop(topOffset);
});

Combine this with your previous fix for Chrome, and it should cover all major browsers. Here is a working example - http://jsfiddle.net/o2tk05ab/5/

The only outstanding issue will be the visible vertical scrollbar on a wrapper div. There are several ways to go about it, for instance - Hide scroll bar, but still being able to scroll