Scroll parent window when iframe hovered
Scroll parent window when iframe hovered
Context
I'm trying to embed an iframe within another page (different domains)
The embed code looks like this:
<script type="application/javascript" src="[...]/myTopScript.js"></script>
<iframe src="differentDomain/somePage.html" frameborder="0" allowfullscreen width="100%"></iframe>
I'm responsible for iframe content and myTopScript.js
There is another script within the iframe (lets call it myInnerScript.js)
TL;DR: iframe height is always superior to its content height (no scroll inside)
Whenever my iframe content height change I'm sending a message to the parent window (via window.parent.postMessage) to provide the new height to myTopScript.js. The top script will then catch the message and update my iframe height property to newHeight + 1px.
window.parent.postMessage
newHeight + 1px
This way my iframe never needs a scrollbar and looks like any other part of the host website.
Issue
I can't scroll the parent page (with the mouse wheel) when the mouse is over the iframe.
overflow:hidden
<body>
scrolling="no"
pointer-events:none
<iframe>
Do you have any spec reference or document explaining this ? And ideas on what else I could try ?
I thought about forwarding mousewheel events via postMessage but I'm pretty sure this would not be reliable
0
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
