小编Den*_*syn的帖子

如何正确使用 Locomotive Scroll 和 Next.js 路由?

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

如何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>
     );
}
Run Code Online (Sandbox Code Playgroud)

javascript reactjs next.js locomotive-scroll

3
推荐指数
1
解决办法
6803
查看次数

标签 统计

javascript ×1

locomotive-scroll ×1

next.js ×1

reactjs ×1