如何正确使用带Next.js路由的机车卷轴？

Question

我用的是locomotive-scroll和Next.js，一切都很好。但是在路由到一个不同的页面后，我的卷轴不会被破坏，两个卷轴重叠在一起。

如何正确地恢复locomotive-scroll在Next.js后的路由？

我的代码示例：

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>
     );
}

Answer 1

您应该将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 () => {
            if (scroll) scroll.destroy();
        }
    });

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

Answer 2

朱利奥马尔斯说的一切都是真的。但我只想补充一点。机车通过初始化自身并在页面加载时读取实际文档大小来工作。但是下一个js路由的情况是，页面只加载一次，之后它的唯一组件更改，没有实际的页面重新加载。因此，Scroll实例将假设页面在加载时仍然相同大小。这会导致大量的错误和页面破坏。

我解决这个问题的方法是在app组件中添加这一行：useEffect(()=> window.dispatchEvent(new Event('resize')), [Component])

这样，每次切换页面“组件”时，调整大小事件都会触发。机车滚动实例将获取此事件并根据新组件大小重新计算页面大小。