Menu
I'm making a mobile HTML5 app. I've disabled scrolling (and enabled it on certain parts) and it's all good and well, but the problem starts when I embed a Youtube video through an iFrame. It seems that when a user presses an iframe, the whole page scrolls and I can't seem to find a way around this. Adding event listeners does not work.
291
1) Set the scrolling attribute of the iframe to no (scrolling="no"). This will disable both horizontal and vertical scroll bars. 2) Set the width attribute of the iframe to 200% (width="200%").
If you don't want the contents of the iframe to be interactable by the user, you can disable pointer-events on it. But as you want it to be scrollable, just put a full sized iframe in a smaller div with overflow: scroll.
Open the Settings app and go to the Devices group of settings. Go to the Touchpad tab. Scroll down to the Zoom and Scroll section, and uncheck the 'Drag two fingers to scroll' option.
You really can't control what happens in the iframe.
But if you want to be a little clever you can put elements directly over the iframe, like a div or transparent canvas or whatever you want, that will catch all of the events so that the user simply cannot press the iframe.
Not the most ideal, it means users cant press the buttons on the youtube video, but its probably your only real option.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
