如何解决如何在 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>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。