如何正确使用带Next.js路由的机车卷轴？
如何正确使用带Next.js路由的机车卷轴？
提问于 2021-07-05 20:52:14
我用的是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>
);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-12 05:56:37
您应该将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>
);
}Stack Overflow用户
发布于 2022-02-10 08:22:35
朱利奥马尔斯说的一切都是真的。但我只想补充一点。机车通过初始化自身并在页面加载时读取实际文档大小来工作。但是下一个js路由的情况是，页面只加载一次，之后它的唯一组件更改，没有实际的页面重新加载。因此，Scroll实例将假设页面在加载时仍然相同大小。这会导致大量的错误和页面破坏。
我解决这个问题的方法是在app组件中添加这一行：useEffect(()=> window.dispatchEvent(new Event('resize')), [Component])
这样，每次切换页面“组件”时，调整大小事件都会触发。机车滚动实例将获取此事件并根据新组件大小重新计算页面大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68264720
复制相关文章
点击加载更多
相似问题
代理背后的无服务器插件
Api-nginx代理背后的平台坞部署
Apache背后的代理react服务器
Jetty反向代理背后的Keycloak服务器
Traefik代理背后的Java Grpc服务器
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
