# ScrollControls issue when using Dreis Html helper

**URL:** <https://discourse.threejs.org/t/scrollcontrols-issue-when-using-dreis-html-helper/32346>\
**Category:** Questions\
**Tags:** drei, react-three-fiber\
**Created:** [December 4, 2021, 3:30am UTC](https://discourse.threejs.org/t/scrollcontrols-issue-when-using-dreis-html-helper/32346 "2021-12-04T03:30:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kylewetton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kylewetton/32/8143_2.png) [@kylewetton](https://discourse.threejs.org/u/kylewetton)\
**Post date:** [December 4, 2021, 3:30am UTC](https://discourse.threejs.org/t/scrollcontrols-issue-when-using-dreis-html-helper/32346/1 "2021-12-04T03:30:25Z")

</div>

@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](https://codesandbox.io/s/scrollcontrols-issue-forked-jyj3j?file=/src/App.js)

Again, any help will be magic and legendary

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 4, 2021, 1:47pm UTC](https://discourse.threejs.org/t/scrollcontrols-issue-when-using-dreis-html-helper/32346/2 "2021-12-04T13:47:35Z")

</div>

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](https://github.com/pmndrs/drei/blob/f2f9447207f2abee32e1c30ea0cf892c22f16464/src/web/ScrollControls.tsx#L103-L109)

but thats the only reason you can go over the fonts here [Scrollcontrols with minimap - CodeSandbox](https://codesandbox.io/s/scrollcontrols-with-minimap-yjhzv) 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.

---

<div class="post-metadata">

**Author:** ![kylewetton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kylewetton/32/8143_2.png) [@kylewetton](https://discourse.threejs.org/u/kylewetton)\
**Post date:** [December 4, 2021, 3:24pm UTC](https://discourse.threejs.org/t/scrollcontrols-issue-when-using-dreis-html-helper/32346/3 "2021-12-04T15:24:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 4, 2021, 3:36pm UTC](https://discourse.threejs.org/t/scrollcontrols-issue-when-using-dreis-html-helper/32346/4 "2021-12-04T15:36:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tom\_Bowman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tom_bowman/32/41731_2.png) [@Tom\_Bowman](https://discourse.threejs.org/u/Tom_Bowman)\
**Post date:** [November 9, 2023, 1:35pm UTC](https://discourse.threejs.org/t/scrollcontrols-issue-when-using-dreis-html-helper/32346/5 "2023-11-09T13:35:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kennyegun24](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kennyegun24/32/46749_2.png) [@kennyegun24](https://discourse.threejs.org/u/kennyegun24)\
**Post date:** [April 12, 2024, 10:44am UTC](https://discourse.threejs.org/t/scrollcontrols-issue-when-using-dreis-html-helper/32346/6 "2024-04-12T10:44:33Z")

</div>

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;