How to enable page scrolling on <canvas> element

[hanhanxue]

Hello! So I noticed that when the cursor is over the element scrolling is not working. How could I enable it? Especially when the canvas is full width it's not ideal to be stuck with using the scroll bar to navigate up / down the page.

Thank you

[jeffreylanters]

Hello! You can disable the canvas' scroll event using the disabled canvas events API.

The following example shows how you can disable scrolling event for the entire canvas.

<Unity
  unityProvider={unityProvider}
  disabledCanvasEvents={["scroll"]}
/>

See the API reference for more information: https://react-unity-webgl.dev/docs/api/disabled-canvas-events.

Best of luck with your project!

[hanhanxue]

@jeffreylanters thank you for the quick reply!

I just read the comments inside the UnityArguments type definition and it's exactly what I'm looking for. However I added the disabledCanvasEvents={["scroll"]} line and it's still not letting me scroll in my project. Is there any way I can debug this on my end?

Here is a page I'm using to test the behavior

Thank you!

[jeffreylanters]

Thank you for your feedback, I see what's happening here. I'm going to try to look into adding this feature as soon as possible! I'll keep you posted.

[hanhanxue]

This is awesome and please do. Thank you!

[TravisChen]

@jeffreylanters Hi Jeffrey! Were you ever able to look into this?

[TravisChen]

@jeffreylanters @hanhanxue

I ended up finding a solution that seems to work.

Get a reference to the canvas and then add this. Effectively it disables pointer events while wheel scrolling or swiping. But enables them otherwise.

https://pastebin.com/GbdNmcPX