solved Lock pagescrollign in iframe with babylon

[swat0284]

Hello can i lock pagescrolling when cursor is in babylonjs iframe window?

[Wingnut]

Hi again, Swat!   I wish you would have given us more details.  This sounds like an HTML issue and not a BabylonJS thing.  BabylonJS uses an HTML canvas element, as you likely know.  That is the only interaction that BJS does with HTML.  So, just pretend the canvas tag is empty, and then treat this like a web page (HTML) issue, and you can research HTML forums to find the answer.

 

All that said, do you know CSS styles?  CSS is the way to control the scrolling of webpage elements.  If you were to "Get .zip" of a BJS playground, and examine it at home, you will see some CSS "style rules" near the top:

<style>	html, body {		background-color: black;		overflow: hidden;		width: 100%;		height: 100%;		overflow: auto;		margin: 0;		padding: 0;	}	#renderCanvas {		width: 100%;		height: 100%;		touch-action: none;	}</style>

If you were to shrink/resize (restore) the size of a playground window... you'd see that the body and html elements never cause a scrollbar, even though overflow: auto.  (overflow: auto means turn on scrollbars when needed.) 

 

But they don't turn-on... because... height: 100%.  When you use PERCENTAGES like this... and NOT things like 1234px or 432pt... you automatically win the battle.  RenderCanvas height: 100% means... use 100 percent of the parent container size, and since the html and body are also at 100% height (and width), nothing you can do... creates any scrollbars.  (the editor section still has its own scrolling, but that's not pertinent to your project).

 

You need to use these same methods for your iframe and IT'S container, and the container's container, etc.  Work with the CSS on your iframe... using CSS height percentages, and overflow settings, and I think you will find success.

 

Here is my handy CSS3 page... http://webpages.charter.net/wingthing/html/propIndex.htm  Click on items like height, and max-height, and overflow (box module), and overflow-y (box model) and it will open the CSS3 spec for THAT property... in another browser window.  If you click on something and it appears nothing happened, it probably DID happen but in a different browser window.

 

Overflow-y is for when you need horizontal scrolling (overflow-x) to continue working, but you want no vertical scrolling.  But again, height: 100% or maybe height: 95%... is just as important as your overflow setting... maybe more so.  Visit CSS style tutorials for more information... and maybe publish an online example so we (and folks on CSS forums) can see what is happening.

 

Good luck!  I hope this was helpful.

[Vousk-prod.]

I don't think so... I'm pretty sure an iframe cannot have higher DOM priority than itself (you can't control the page which embed it)...

[Wingnut]

Ohhh.... good point, VP.  The content inside an iframe... is somewhat isolated from the page that contains the iframe.  I forgot all about that.

 

Yes, Swat, if you don't own or have-control-over the content inside the iframe, then that content is outside of your reach.  My above answer was assuming that you owned/controlled the content inside the iframe.

 

Thanks for pointing this out, VP.  Yuh yuh yuh.

[Dad72]

Hi,

 

<iframe src="file.html" height="100%" width="100%" frameborder="0" scrolling="no" id="iframe0" name="iframe0"></iframe>

 

or/and css

 

overflow: hidden;

position:fixed

[Wingnut]

A scrolling attribute in the iframe element?  Does that work, Dad72?  You're a genius!  Too cool.

 

http://www.w3.org/TR/html-markup/iframe.html

 

According to html5 spec, it's obsolete... but so what?  We need to get that one taken OFF the obsolete list. 

[Vousk-prod.]

I think he's asking the opposite, he wants to prevent scrolling of the global page where a babylon scene is embeded as an iframe. And I think this is impossible.

[Dad72]

Attribute obsolete does not mean it is not usable.

[Dad72]

or no obsolete :

<iframe src="file.html" height="100%" width="100%" style="overflow:hidden;border:0px;width:100%;height:100%;" id="iframe0" name="iframe0"></iframe>

[Wingnut]

*nod*

 

Yeah, maybe you are correct, VP  (iframed BJS scene inside alien page).

 

But wow, ol' Swat sure got his money's worth from his one-line question, eh?  He's got every solution known to mankind, now. 

[swat0284]

Hello again,
Yes i want to lock main page that contain babylon iframe,
Yes i know that is hard to make
Yes i need to make that
No i dont have solution yet
No i dont read all posts yet

[cstfan]

On 11/25/2015 at 8:38 PM, swat0284 said:

Hello again,
Yes i want to lock main page that contain babylon iframe,
Yes i know that is hard to make
Yes i need to make that
No i dont have solution yet
No i dont read all posts yet

15

Hi,

I have the same problem when I insert the Babylon scene in an iframe on a page of an LMS (Learning management system).
With a Blend4Web scene with the same iframe code, I haven't this problem. When the pointer of my mouse is above the scene, the wheel mouse zoom or reduce zoom, and the main page of the LMS doesn't move / scrolling.
It's a real problem for me, please help 

 

[Arte]

Hi @cstfan

Solution:

<iframe ......... scrolling="no">...</iframe>

Mouse Over iframe => body { overflow-y: hidden;}

Mouse Out iframe => body { overflow-y: scroll;}

I hope this can help you. 

[Guest]

Also make sure to:

- Add a reference to pep.js

- Check here: http://doc.babylonjs.com/how_to/interactions

[cstfan]

Hi @Deltakosh and @Arte

I had already pep, but I added in the CSS file overflow-y: hidden; and overflow-y: scroll; but I have the same problem ?
Look this to show you better my problem : https://share.vidyard.com/watch/PHiUnFFJU6GDoDw1E1TacJ?

My iframe used :

<iframe width="800" height="500" src="https://novancia.blackboard.com/bbcswebdav/pid-101835-dt-content-rid-442562_1/xid-442562_1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowfullscreen=""></iframe>

I hope really that you can help me to found this problem, if you want try go to : https://novancia.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_10905_1&amp;content_id=_51418_1

username : test

password : html5

 

 

 

 

[Arte]

In CSS need just one overflow-y: scroll; (default)

When mouseOver canvas replace scroll with hidden. When mouseOut canvas, hidden replace with scroll.

 

*Edited:

That's how I did it with jquery.

<iframe class="myIframe" width="800" height="500" src="https://novancia.blackboard.com/bbcswebdav/pid-101835-dt-content-rid-442562_1/xid-442562_1" scrolling="no"></iframe>

$( ".myIframe" ).mouseover(function() {
$('html, body').css('overflow-y', 'hidden');
}).mouseleave(function() {
$('html, body').css('overflow-y', 'scroll');

I know that this is not the most ideal solution, but it works very well.

 

[cstfan]

Hi @Arte ,

I just tried with only overflow-y: scroll; in CSS, but I have the same problem ?

And I can't apply the other solution because the html editor of the "Learning Management System" automatically delete class="myIframe" even if I indicate in the backoffice to filter the html code less.

I'm desperate, I feel like we're not going to make it. However, it worked with the package managed by Blend4Web. 

I saw the files of the package css, html, etc... and I tried to use some part of code but it's nothing , code : https://drive.google.com/open?id=1-e9T5iRqz8mlRjvnGz4r373pVJkGTJwU

It's a real shame if I can't eliminate this problem, it will degrade the quality of the interaction.

Thank you very much @Arte for your help, I hope that you have others ideas

@Deltakosh may have other avenues of research to offer me, I sincerely hope so.

Have a good day

 

[Sebavan]

Hello,

Could you try to repro on codePen or jsFiddle so that everybody on the forum could easily try to help with your issue ?

[Guest]

Let me shoot in the dark

Can you try with camera.attachControl(canvas, true) or canera.attachControl(canvas, false);

Perhaps one of this could work. The overall idea is to not bubble up the events

[Guest]

As @Sebavan mentioned, we REALLY need a live repro to help

What you want to do is feasible and was done a lot of time, so there is obviously something we can do to make it work

[Guest]

Also you can try that: BABYLON.Camera.ForceAttachControlToAlwaysPreventDefault = true

[cstfan]

On 9/26/2018 at 6:31 PM, Deltakosh said:

Let me shoot in the dark

Can you try with camera.attachControl(canvas, true) or canera.attachControl(canvas, false);

Perhaps one of this could work. The overall idea is to not bubble up the events

2

Hi @Deltakosh

I just try with false argument, it works, but not with true (???)

Thank you very much, it's a very good thing.

[cstfan]

On 9/26/2018 at 6:56 PM, Deltakosh said:

Also you can try that: BABYLON.Camera.ForceAttachControlToAlwaysPreventDefault = true

I also tested this solution, doesn't work, but the previous one is OK thanks very much again @Deltakosh

[Guest]

My pleasure!