Hide Scrollbar in Scroll component

Questions
1

Good day Everyone

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] }}>
        <ScrollControls
          maxSpeed={1.5}
          pages={2.4}
          damping={0.1}
        >
          <ScrollManager onSectionChange={setSection} section={section} />
          <Scroll>
            <Experience section={section} />
          </Scroll>
          <Scroll html>
            <Interface />
          </Scroll>
        </ScrollControls>
      </Canvas>
      <ProjectSection />
      <ContactForm />
      <Nav
        menuOpen={menuOpen}
        setMenuOpen={setMenuOpen}
        onSectionChange={setSection}
        currentSection={section}
      />
    </div>
  );
}

export default App;
2

Go to ScrollControls imported from “@react-three/drei” and change line 71

el.style.left = "0px";

to:

el.style.left = "15px";

You have to run npm run start or run dev again in order for your change to take place.

3

Thank you, I will do that now!