Scrolling problem with PlayCanvas in iFrame inside a long web page


I have a PlayCanvas project that manage this event:, this.onMouseWheel, this);

So when I scroll, I can zoom-in / zoom-out in my application.

The problem is when I embed my PlayCanvas in an iFrame where the website page is long enough to have a scrollbar. If I scroll, the zoom out event will happend but the page will also scroll down!

This solution…:

MouseInput.prototype.onMouseWheel = function (event) {

[…] doesn’t work because of this error:

So, my question is: How can I prevent the parent page to scroll if my mouse is hover the iframe (so hover the canvas that resize to 100% of the iframe)?

Haven’t tested it, but look at this:

So you need to overwrite the mouse-wheel event listener of the parent element. You probably also need to define prevenDefault as described in the link above.


var parent = document.getElementById('parent-element');
parent.onwheel = preventDefault;

I am facing more or less a same issue.
This is my issue link: React + Playcanvas (iframe) Scrolling page issue

Did anyone found the solution, as in my case it’s not mouse wheel, but touch scroll