Prevent parent page from scrolling when mouse is over embedded iframe

Question

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

I have a google-map-like widget that can be embedded in 3rd party websites in the form of an iframe embed code. When people use mouse wheel over my widget I want only the content of the widget to scroll and not the parent page.

My question is similar to How to prevent page scrolling when scrolling a DIV element? but my problem is that my ifrmae contains multiple elements including media and canvas that must keep listening to mouse wheel event. TLDR the solution to use e.preventDefault() and manually update the scrollTop property of all elements inside the iframe that should stay scrollable is impractical, error prone and dependent on the non-standard wheelDelta property.

Here is a JS Bin for your convenience. Thank you.

Hatter

Answer 1

While scrolling inside an iframe, the body doesn't know anything about what happens there. But when iframe scroller reach the bottom or the top, it pass scrolling to body. See my jsFiddle and console log there.

Snubnosed

that's very interesting solution, thanks for that, except as I said my widget is embedded in 3rd party pages over which I have zero influence, I can not ask them to add a script. I am going to explore if a solution with 2 nested iframes would solve the issue. – Hatter

what if the iframe doesn't have any scrolling, the height and width is set as it's a part of the page ? – Malinger