@drcmda apologies for reaching out here but I see that Spectrum.chat 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.
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.