如何在 Next.js 路由中正确使用 Locomotive Scroll？

问题描述

我在 Next.js 中使用 locomotive-scroll，一切正常。但是在路由到不同的页面后，我的卷轴不会破坏并且 2 个卷轴相互重叠。

如何在路由后在 Next.js 中正确地重新初始化 locomotive-scroll？

我的代码示例：

function MyApp({ Component,pageProps }) {
    useEffect(() => {
        import("locomotive-scroll").then((locomotiveModule) => {
            let scroll = new locomotiveModule.default({
                el: document.querySelector("[data-scroll-container]"),smooth: true,smoothMobile: false,resetNativeScroll: true,});
          
             scroll.destroy();  //<-- DOESN'T WORK OR IDK
    
             setTimeout(function () {
                 scroll.init();
             },400);
         });
     });
    
     return (
         <main data-scroll-container>
             <Component {...pageProps} />
         </main>
     );
}

解决方法

您应该将 scroll.destroy 调用移至 useEffect 的清理阶段。您也不需要显式调用 scroll.init()。

function MyApp({ Component,pageProps }) {
    useEffect(() => {
        let scroll;
        import("locomotive-scroll").then((locomotiveModule) => {
            scroll = new locomotiveModule.default({
                el: document.querySelector("[data-scroll-container]"),smooth: true,smoothMobile: false,resetNativeScroll: true
            });
        });

        // `useEffect`'s cleanup phase
        return () => scroll.destroy();
    });

    return (
        <main className="main" data-scroll-container>
            <Layout>
                <Component {...pageProps} />
            </Layout>
        </main>
    );
}