如何正确使用机车滚动和 Next.js 路由？答案

【问题标题】：How to correctly use Locomotive Scroll with Next.js routing?如何正确使用机车滚动和 Next.js 路由？
【发布时间】：2021-07-06 04:52:14
【问题描述】：

我将 locomotive-scroll 与 Next.js 一起使用，一切正常。但是在路由到不同的页面后，我的卷轴不会破坏，并且 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的返回语句（cleanup phase），即return () => scroll.destroy();。
还是不行，return () => { scroll.destroy(); setTimeout(function () { scroll.init(); }, 500); };
我认为问题出在动态导入模块机车上，它已经初始化了一个新模块并对其应用了脚本，而旧的保持不变，可能需要替换动态导入静态

标签： javascript reactjs next.js locomotive-scroll

【解决方案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 () => scroll.destroy();
    });

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

【讨论】：

【解决方案2】：

@juliomalves 所说的一切都是真的。但我只想补充一点。机车通过初始化自身并在页面加载时读取实际文档大小来工作。但是下一个 js 路由的情况是页面只加载一次，之后它的唯一组件发生变化，没有实际的页面重新加载。所以 Scroll 实例将假定页面在加载时仍然是相同的大小。这会导致很多错误和分页。

我解决它的方法是在应用程序组件中添加这一行： useEffect(()=> window.dispatchEvent(new Event('resize')), [Component])

这样每次切换页面“组件”时都会触发resize事件。机车 Scroll 实例会拾取这个事件并根据新的组件大小重新计算页面大小。

【讨论】：