How to disable "auto scroll behavior" when clicking on canvas the first time (blur and focus)

Questions
1

when the canvas does not in the document viewport completely, the page will scroll when clicking on canvas the first time, or you can click the top div, then click the canvas to test.
wonderful-violet-f5iqjb - CodeSandbox
how to disable this.
I search a lot but got nothing, maybe my keywords are wrong
thank you ~
ps: I found it happens after “new Scene”

2

Oh I remember answering a similar question a bit ago: When I was in canvas focus, the style of document changed - Bugs - Babylon.js (babylonjs.com)

3

thank you for your answer, but it doesn’t work for me.
You can click top div, then click the canvas to test.
relaxed-mendeleev-reusre - CodeSandbox

4

Thanks for following up! Me and @sebavan dug into the code to understand why it was behaving like this and we found there’s a moment where focus is applied to the canvas: Babylon.js/scene.inputManager.ts at master · BabylonJS/Babylon.js (github.com)

You can avoid this happening if you set preventDefaultOnPointerDown/Up: flamboyant-fast-g4402y - CodeSandbox

2 Likes
5

Thank you so much, i see now
click → focus → scrollIntoView(because the tabIndex Babylon.js/scene.inputManager.ts at master · BabylonJS/Babylon.js (github.com) )

So when using Tab key will focus on the canvas，it will also scroll.

I’m wondering why we add the tabindex when mouse move. @RaananW would you help me? thank you~

Some camera input also exec focus when noPreventDefault is false ( Babylon.js/BaseCameraPointersInput.ts at 360761ca0c5cfe7d42a32db9315352e50484b956 · BabylonJS/Babylon.js (github.com)), but i can’t set to true, because the wheel event will scroll the page, see
unruffled-frost-bfwf2w - CodeSandbox

6

I think @PolygonalSun will be the best person to know this

2 Likes
7

IIRC, we use tabIndex because there are scenarios where the input may be grabbed by another element instead of the canvas itself. If you don’t have anything over your canvas like another HTMLElement, you could try setting `engine.canvasTabIndex = -1 and that would prevent the canvas from being tabbed to.

As far as the page scrolling when the cursor is over the canvas, the reason for that is because you’re using a FreeCamera which doesn’t attach wheel controls by default. Since there are no controls to call preventDefault with, the wheel defaults to the standard browser behavior. You can add the wheel controls but just using camera.addMouseWheel()

2 Likes
8

Thank you, but my example above unruffled-frost-bfwf2w - CodeSandbox uses ArcRotateCamera which attach wheel controls by default, but set noPreventDefault true or false, there is different problem

true: the wheel event will scroll the page and zoom the scene at the same time, because wheel event listener doesn’t call evt.preventDefault()
false: click->focus → scroll, because wheel event listener call element.focus()

( Babylon.js/BaseCameraPointersInput.ts at 360761ca0c5cfe7d42a32db9315352e50484b956 · BabylonJS/Babylon.js (github.com) )

I can implement my own wheelInput to resolve this, but maybe the ArcRotateCamera’s behaviors are conflict

Thanks a lot ~

9

Thanks