Search code examples
react-three-fiberreact-three-drei

@react-three/drei Html element is not bubbling up the scroll event

I have a <Html><svg /></Html> element in my react-three-fiber project. This element is grouped with the camera to keep element in front of the camera. When mouse pointer is on this element scroll i not working for ScrollControl and not scrolling. Is there a way to keep scrolling on the background ?

Solution

  • It is because your HTML elements didn't be in canvas. You can do the following. Add props 'fullpage' and 'zIndexRange={[-100, -2]}'

    ex: <Html fullscreen zIndexRange={[-100, -2]}>

    Then you can use your scrolling