ScrollControls issue when using Dreis Html helper

Questions
,
1

@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

2

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.

3 Likes
3

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

2 Likes
4

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

5

Hi Kyle, I just stumbled across this issue now. I see the solution @drcmda came up with is to make the html elements sticky, but how did you go about implementing this? Thanks.

1 Like
6

Good day Tom

Please, do you by any chance know a way to hide the scroll bar display from react-three/drei?
I have tried using css, but it doesnt work… I am new to Three fibre and anything 3d with web development.

import { Canvas } from “@react-three/fiber”;
import { Experience } from “./components/Experience”;
import { OrbitControls, Scroll, ScrollControls } from “@react-three/drei”;
import Interface, { ContactForm, ProjectSection } from “./components/Interface”;
import Nav from “./components/Nav”;
import { useEffect, useState } from “react”;
import ScrollManager from “./components/ScrollManager”;

function App() {
const [section, setSection] = useState(0);
const [menuOpen, setMenuOpen] = useState(false);

useEffect(() => {
setMenuOpen(false);
}, [section]);
return (
<div style={{ height: “100%”, width: “100%” }} className=“app”>
<Canvas shadows camera={{ position: [0, 2, 5] }}>














);
}

export default App;

1 Like