Scroll through Joystick/Thumbstick inside XR mode in ScrollViewer

Hello Everyone,
I am using a scrollViewer to display number of contents inside XR mode. Currently if there are more contents then i use Joystick pointer to scroller and then use that scroller to do the scrolling.

Instead of that, I would like to use Joystick up and down movement for scrolling for scrollViewer.
Can someone please give the suggestion how can i achieve this ?

I hope i am clear in my requirement

cc @carolhmj our GUI expert

Can someone please look into this Post ?

It will be very helpful for anyone helping you if you share a reproduction - some code, preferably a working playground.

Hi @RaananW

Its just a question. i am yet to implement anything. so asking here as a suggestion. if i want to use Joystick to scroll the scrollviewer… how can i do that ? the same way we are using Mouse onwheel observable outside XR.

At the moment there is no way to control the scroll view without wheel-events. One way would be to emulate wheel events. Another would be on us - to expose the API to set the position of the scrollview, based on user input. You will then be able to use the thumbstick’s values to use this API and scroll through.

CC @carolhmj - we can talk about it tomorrow.

You can actually already set the scrollviewer’s position by setting the “value” property on the corresponding horizontal and vertical scroll bars, here’s an example that uses “WASD” to control: Scroll Viewer Example with Grid of Images | Babylon.js Playground (

1 Like

Thanks Carol & Raanan !!!

1 Like