ScrollControls issue when using Dreis Html helper

@drcmda apologies for reaching out here but I see that is now read-only

I’m desperate for a bit of help on this as this is your eco-system and while it’s a niche question it might help someone else searching for a similar situation.

The project I’m working on scrolls on the Y axis, but I’m simulatiing scrolling on the Z axis. I’m simply using useScroll to move the camera through the scene.

To help with transforms I’m leveraging the <Html transform> method, I noticed that these elements steal the events when the mouse is over it.

These elements will need to be interacted with (some will be buttons, etc). Any way, how would I go about tracking the scroll while the mouse is over these elements? I’ve distilled the issue in a hopefully easy to follow scene here ScrollControls Issue (forked) - CodeSandbox

Again, any help will be magic and legendary

im afraid this is how css works, sadly, this is nothing a library will easily solve because the browser just doesn’t send those events to the scroll region. in scrollcontrols i found a hack, the only one that ever worked for me. and that’s making html elements sticky. i have no idea why that works. drei/ScrollControls.tsx at f2f9447207f2abee32e1c30ea0cf892c22f16464 · pmndrs/drei · GitHub

but thats the only reason you can go over the fonts here Scrollcontrols with minimap - CodeSandbox and scroll. if there werent sticky you’d get the same result as yours.

another thing you could look into is goving both the html elements and the scroll canvas a shared event target, there is a prop for that on the element.

1 Like

No shit, no idea how you’d have figured that out but I wouldn’t have thought of it. Thanks for helping out

i struggled with this one for months, always giving up and just settling on pointer-events: none. :frowning: