Scrolling scrollViewer seems to not work on Mobile? / Difference between mobile and desktop gestures?

Questions
, , ,
1

I wanted to check there was a different way to attach controls when on mobile versus when on desktop? When on desktop (Mac), using what (I think) is the normal gesture to scroll up and down (two fingers moved together upwards or downwards) causes the scrollViewer to scroll up or down. Where as on mobile (iOS Firefox and Chrome) it does not do anything, neither does the single finger move. On mobile the single or double finger down-and-move usually performs a scroll/2d-panning function.

Also I noticed using this demo: Babylon.js Playground that actually the camera controls were also different. On desktop the scroll gesture causes the camera to zoom in or out where as on mobile it causes the camera to strafe and maybe increase/decrease Y (but I can’t be certain).

Single finger down and move left-right. On mobile causes rotation around the Y axis. On desktop does nothing.

Single finger down and move up-down. On mobile causes rotation around current perpendical X-Z axis. On desktop does nothing.

etc…
There must be a table of this somewhere but I haven’t found it yet?

Related question: Opinions on best gesture solution for js

Thanks!

I see there are different pointer event types like POINTER_TYPE_MOUSE and POINTER_TYPE_TOUCH so I assume this is where the difference is coming from as the trackpad on the desktop is being treated as a mouse maybe? Camera more sensitive to touch in mobile device - Questions & Answers - HTML5 Game Devs Forum

2

cc @PolygonalSun

1 Like
3

Both mobile and desktop controls are attached the same way but how they’re interpreted by camera inputs is slightly different. With mouse (ie. evt.pointerType = "mouse"), the scroll wheel/pad should populate a value in the mouse’s PointerEvent (eg. deltaY) that can be used by the zoom code. For touch, we just work with a touch’s location and manually interpret gestures within our camera’s code. That might explain some of the discrepancies that you’re seeing between mobile and desktop. As for the trackpad, they tend to be treated as a mouse pointer, with respect to the PointerEvent API so we use them as such.

1 Like
4

Thanks @PolygonalSun . Sorry I have corrected the title. Do you expect the scroll of the scrollViewer to work on mobile as it doesn’t seem to work for me? The scrollbar is fine though.

5

I’ll admit, I’m not too familiar with the scroll viewer myself but I’d expect that a scroll gesture on touch would not work with the scroll viewer because the touch input would be treated as multiple inputs that would need logic to be interpreted as a specific gesture which I don’t think our GUI elements do currently.

1 Like
6

No problem. Thank you! :slight_smile:

From this answer I’ve learnt about camera.detachControl().

And if I combine with scene.onPointerDown/Up and scene.onPointerMove I might be able to fudge the movement. Do you think that might work? I can’t see an attribute on scrollViewer at the moment that allows you to set the scroll position… Assuming you can “manually” set it, do you think there are any gotchas that I should look out for if I attempt that approach of “manually” linking pointer movement to the scrollViewer?

7

Sure is. Give a sec I believe it’s verticalBar…yup, so i.e to put the bar on top (and of course content)

sv.verticalBar.value = 0;

Else, I am glad to hear you managed to fix your issue with UX. :iphone: can be just so frustrating.
Have a great WE :sunglasses:

1 Like
8

I have some demo code that I think solves this and solves the other problem: Prevent scrollViewer onWheel event from “propagating” to camera zoom

Thanks for everyone’s help. Particularly @mawa ! :star2:

2 Likes