After some fiddling, the solution I came up with was to conditionally render the children. The scroll requires a ref to the scroll container so the init function is placed inside useEffect to guarantee the ref is defined. And because this component is at the "top level" we don't need to pass location to the useEffect callback. This seems to work but any improvements or suggestions are welcome 🤷♂️
import React, { useRef, useEffect, useState } from "react"
import Navbar from "./navbar"
import Scroll from './scroll'
import '../styles/smooth-scrollbar.css'
const Layout = ({ children }) => {
let scrollerRef = useRef()
let [scrollDefined, setScrollDefined] = useState(false)
const initScroll = () => {
Scroll(scrollerRef)
setScrollDefined(true)
}
useEffect(() => {
initScroll()
}, [])
return (
<div className="global-wrapper scroller h-screen overflow-hidden" ref={scrollerRef}>
<header className="global-header animate__animated animate__fadeIn">
<Navbar />
</header>
<main>{ scrollDefined && children }</main>
<footer>
{/* © {new Date().getFullYear()}, Built with */}
{` `}
{/* <a href="https://www.gatsbyjs.com">Gatsby</a> */}
</footer>
</div>
)
}
export default Layout
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Scrollbar from 'smooth-scrollbar'
import SoftScrollPlugin from './plugins/SoftScrollPlugin'
const Scroll = (scrollerRef) => {
const scroller = scrollerRef.current
Scrollbar.use(SoftScrollPlugin)
const bodyScrollBar = Scrollbar.init(scroller, { damping: 0.1, delegateTo: document, alwaysShowTracks: true })
window.bodyScrollBar = bodyScrollBar
gsap.registerPlugin(ScrollTrigger)
ScrollTrigger.defaults({ scroller: scroller })
ScrollTrigger.scrollerProxy(scroller, {
scrollTop(value) {
if (arguments.length) {
bodyScrollBar.scrollTop = value
}
return bodyScrollBar.scrollTop
}
})
ScrollTrigger.refresh()
bodyScrollBar.addListener(ScrollTrigger.update)
}
export default Scroll
