GatsbyJS overlay scrollbars

I'm trying to change the deault scrollbar on my Gatsby website to an overlay scrollbar to prevent the page 'shifting' to the left slightly when navigating between pages that do/do not have scrollbars.

I am trying to use this package: https://www.npmjs.com/package/overlayscrollbars-react, however cannot seem to find where to use the JSX component provided within Gatsby?

I've tried wrapping the <html> tag in src/html.js but that causes none of my website content to be loaded - just a white page.

I have also tried wrapping other elements such as <body> in src/html.js and even more elements working further down the HTML tree (in my own code files, e.g. index.tsx), but with no luck.

Can anyone provide some insight as to where I should use this component in GatsbyJS? I'm still trying to get my head around how Gatsby lays everything out.

Shown below is my current code I'm trying to use to display the new scrollbar. Unfortunately it seems to still just show 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>   
        </>
    );
}

Thanks!

Solution

After a lot of digging, I found a solution to this. I found a codesandbox by saurabh73 (https://codesandbox.io/s/github/saurabh73/portfolio-website/tree/master/?file=/src/components/layout/index.js:775-1094) which uses a method of using React's useEffect hook to apply the scrollbar.

    useEffect(() => {
        OverlayScrollbars(document.body, {
            nativeScrollbarsOverlaid: {
                initialize: true,
            },
            callbacks: {
                onInitialized: function () {
                    this.scroll(0);
                },
                onOverflowChanged: function () {
                    this.scroll(0);
                },
            },
        });
    });

I put this inside my PageBase component - my equivalent of a normal Gatsby Layout. So my new PageBase looks like this now:

PageBase.tsx:

import React, { useEffect } from "react";
import NavBar from "../components/nav";
import Footer from "../components/footer";
import "overlayscrollbars/css/OverlayScrollbars.css";
import OverlayScrollbars from "overlayscrollbars";

export default function PageBase(props: any) {
    const scrollOptions = {
        nativeScrollbarsOverlaid: {
            initialize: true,
        },
        callbacks: {
            onInitialized: function () {
                this.scroll(0);
            },
            onOverflowChanged: function () {
                this.scroll(0);
            },
        },
    };

    useEffect(() => {
        OverlayScrollbars(document.body, scrollOptions);
    });

    return (
        <>
            <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">
                    <div className="w-5/6 lg:w-4/6">
                        {props.children}
                        <br />
                        <br />
                    </div>
                </main>

                <Footer />
            </div>
        </>
    );
}