Scenes over scroll when reach the radius limit

Hello,

I noticed in playground, I set radius limit for this playground Scroll to the RaduisLimit | Babylon.js Playground (babylonjs.com)

I put this playground inside a web page, I found when I reach the radius limit, it automatically scrolls down or scrolls up instead of stuck in the scene, what value do I need to set to achieve this? Like the overscroll-behavior - CSS: Cascading Style Sheets | MDN (mozilla.org) Thanks!

Wouldn’t setting overscroll-behavior on the canvas work?

I tried add overscroll-behavior: auto css to the canvas, this does not do anything.

I also tried scene.detachControl() when reach the radius limit, which would do similar behavior like overscroll-behavior: auto, but I’m not sure what should I do when I hover back it should still can interact with the scene. In playground’s scene, it just do this without any additional setting

Do you have an example of a page with this behavior?

I can’t repo that in playground, it’s my project, which just stuck in the scene if you do not hover or click other part of the html.

And I find the playground just scroll without reach the limit too :sweat_smile:

What I do in the page, replace the html with

<iframe src="https://playground.babylonjs.com/#A584HZ#23
    " height="400" width="800" title="Iframe Example"></iframe>

Using scrolling = “no” in Iframe
Playground: Camera movement | Babylon.js Playground (babylonjs.com)

With camera.attachControl(canvas, false);
Playground: Camera movement | Babylon.js Playground (babylonjs.com)

Aaah, so you’re using iframe. I was doing it by creating a page directly ( Getting Started - Chapter 1 - Setup Your First Web App | Babylon.js Documentation (babylonjs.com)), and in this case the canvas seems to capture the scroll in the way you want. But maybe @PolygonalSun knows a way of doing this with the iframe?

1 Like

If you pass false when attaching the camera controls does it prevent the page scrolling for you? That way preventDefault is called… It fixed it in a quick test I just did at least. :slight_smile:

camera.attachControl(canvas, false);
1 Like

Adding false as the value for noPreventDefault in camera.attachControl should prevent input events from bubbling up to the window and potentially prevent scrolling. Failing that, you could also add scrolling="no" to the iframe tag.

1 Like

Thank you @Blake , this does prevent scrolling, I updated my reply above with the camera.attachControl(canvas, false); Scenes over scroll when reach the radius limit - #5 by pigga

But the thing I’m trying to achieve is when the radius reach the upperlimit, it should scroll down to the page, when the radius reach the lowerlimit, it should scroll up to the page, not stuck in the scene, kind of like overscroll-behavior - CSS: Cascading Style Sheets | MDN (mozilla.org) in css, is this possible?

I tried do it using css when radius reach the limit, I set something like pointer-events to the canvas, or make scene.detachControl(), it did work as I need, but get a problem, when I hover back, I can’t interact with the scene anymore… I need when it hover back, the scene should still work as before

Playground example: Camera movement | Babylon.js Playground (babylonjs.com)

Thank you @PolygonalSun, but I added scrolling="no" it seems not work for me, also update my playground using `scrolling=“no” above, I’m using window edge

And the thing I’m trying to achieve is when the radius reach the upperlimit, it should scroll down to the page, when the radius reach the lowerlimit, it should scroll up to the page, not stuck in the scene, kind of like over scroll in css, please see more detail for reply above Scenes over scroll when reach the radius limit - #10 by pigga

Hmm that could get a bit tricky. You could try after detaching the camera controls to listen for the canvas’s “pointermove”, etc events to know when to re-attach the controls.

But a complication with that is the camera’s radius is still at the limit so then the camera controls will be detached again right away…

You could try changing the radius by a small, imperceptible amount so that it’s not at the limit anymore but then a tiny bit of zooming in that direction will disable the controls again.

So not sure what direction you’ll want to take your interface then but below is an example of doing it that way on “pointermove”, “pointerdown”, and “pointerenter" events. Hope it helps. :slight_smile:

3 Likes

Thank you @Blake , this is exactly what I need, I will do more test in my project! :smiling_face:

2 Likes