3d scene Scroll on mobile

Questions
1

We have a project on a mobile web page, which user will get stuck on the 3d scene (can’t scroll up or down anymore), when they interact with it, the only way they can scroll up and down is to move to the html part of the page which is not very straightforward.

Are there any good suggestions here about how we can improve user experience? Thanks!

Added a playground example here, so on mobile, I can think one solution is overscroll when reach the beta limit because mobile slide down to scroll, but looks like not working well

Playground example Babylon.js Playground (babylonjs.com)

2

Maybe canvas { pointer-events: none } could help you?
*If your scene has not any interactive

1 Like
3

Thank you for the suggestion, but our scene did have lots of interaction

4

Try to check this solution How to create a click-only canvas? (disable movement, keep "pull down to refresh")

1 Like
5

@PolygonalSun might have a trick

6

If there’s a canvas in the middle of a site and it’s preventing a user from scrolling, it might be worth looking into making some kind of toggle or activation to enter/exit interactive mode. For example, you could have your canvas set up so that the user has to double click to enter or exit an interactive mode:

var inputActive = false;
// ...
scene.onPointerObservable.add((eventData) => {
    if (inputActive) {
        inputActive = false;
        // Disable input, maybe by using camera.detachControls()
     }
     else {
        // Re-enable input
        inputActive = true;
     }
}, BABYLON.PointerEventTypes.POINTERDOUBLETAP);

Because of the nature of how the Cameras/InputManager consume events, it may not be possible to scroll past without adding something to either disable the canvas’ event listeners or re-route the events to the window, under specific circumstances.

2 Likes