I'm struggling to customize the default scrollbar on my Gatsby website with an overlay scrollbar. I want to avoid the page 'shifting' slightly to the left when switching between pages that have scrollbars and those that do not.
My attempt involves using the package: https://www.npmjs.com/package/overlayscrollbars-react, but I can't figure out where to integrate the JSX component within Gatsby?
I've experimented by wrapping the <html> tag in src/html.js, but this approach results in a blank white page without loading any content of my website.
I've also tried wrapping elements like <body> in src/html.js and even other elements further down the HTML tree (in my own code files, e.g., index.tsx), but so far, I've had no success.
Could someone enlighten me on where exactly I should incorporate this component in GatsbyJS? I'm still trying to grasp how Gatsby structures everything.
Below is my current code snippet for displaying the new scrollbar. Unfortunately, it's only showing the default scrollbar:
index.tsx:
import * as React from "react";
import PageBase from "./PageBase";
export default function Home() {
const navigation = [
{ name: "Home", href: "/", current: true },
{ name: "About", href: "/About/", current: false },
{ name: "My Work", href: "/My-Work", current: false },
{ name: "Contact Me", href: "/Contact", current: false },
];
return (
<>
<PageBase navigation={navigation}>
<p>example content</p>
</PageBase>
</>
);
}
PageBase.tsx:
import * as React from "react";
import NavBar from "../components/nav";
import Footer from "../components/footer";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import "overlayscrollbars/css/OverlayScrollbars.css";
export default function PageBase(props: any) {
return (
<>
<OverlayScrollbarsComponent>
<div className="flex flex-col dark:bg-zinc-800 min-h-screen">
<NavBar navigation={props.navigation}></NavBar>
<main className="flex justify-center mt-5 flex-grow overflow-hidden">
<div className="w-5/6 lg:w-4/6">
{props.children}
<br />
<br />
</div>
</main>
<Footer />
</div>
</OverlayScrollbarsComponent>
</>
);
}
Thank you!