Scrolling problem with PlayCanvas in iFrame inside a long web page

Help & Support
1

Hi

I have a PlayCanvas project that manage this event:

this.app.mouse.on(pc.EVENT_MOUSEWHEEL, 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) {
    event.event.preventDefault();
   ...
};

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

image
image.png730×34 1.73 KB

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)?

2

Haven’t tested it, but look at this: https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

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;
3

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