Hi, I have a canvas that is inside the body of an HTML page. When the mouse is over the canvas the scrolling of the page is not enabled. The mouse should scroll the page and manage the canvas only when I interact with it…
How can I do?
How can I do?
I assume you are asking specifically about Babylon.js 
In general the css property touch-action is the one you should be playing with. Babylon sets this property to none for you, so that touch events will flow to the canvas.
You can prevent that from happening with either setting the engine’s option doNotHandleTouchAction to true (when initializing the engine), or using css, forcing the touch-action to be auto !important. Pay attention that the user interaction with the canvs will be somewhat odd (if you attached the camera to the canvas), sinבe it will both scroll AND move the camera.
The best would be to check interaction with the rest of the page. If the user clicks (not scrolls) on the canvas, attach the control, set touch-action to none. If the user touches anything outside of the canvas, set touch-action to auto and you have no issues
A diffferent method would be to enable camera movement using two fingers instead of one, but that would require a bit more tweaking on your side.
4 Likes