Jump to content

Lock pagescrollign in iframe with babylon


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 years later...
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



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 



Link to comment
Share on other sites

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






Link to comment
Share on other sites

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

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



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.


Link to comment
Share on other sites

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


Link to comment
Share on other sites

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


Hi @Deltakosh

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...