locomotive.js 平滑滚动错误的视口高度

Question

我在 wordpress 网站上使用 locomotive.js ( https://locomotivemtl.github.io/locomotive-scroll/ )，但遇到了一个恼人的错误：当导航到动态加载的页面（即投资组合存档页面）时，机车错误地计算视口高度和页面小于应有的高度。 更改窗口大小后，它突然改善了……我意识到在 DOM 元素加载结束之前初始化了 js（我使用的是 vanilla javascript）。 所以我试过这个：

document.addEventListener("DOMContentLoaded", function(event) { 
    const scroll = new LocomotiveScroll({
        el: document.querySelector('[data-scroll-container]'),
        smooth: true,
        smoothMobile: false
    });
});

它没有用。 经过一番研究，我找到了这个论坛： https : //github.com/locomotivemtl/locomotive-scroll/issues/31 - 事情是这样的：“您需要使用 scroll.destroy() 销毁滚动插件的实例；和每次加载页面时初始化它。” - 我不知道怎么做，有人可以帮忙吗？ 谢谢！

Answer 1

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    smoothMobile: false
});
scroll.destroy();
document.addEventListener("DOMContentLoaded", function(event) { 
    scroll.init();
});

Answer 2

我认为您在没有浏览器加载和使用某些第三方库或路由器系统的情况下动态加载页面后会遇到此问题。 你能分享一下 stack 或 package.json 文件吗？ 如果我得到正确答案，这将有助于我发布正确答案？

或者你可以试试这个：

 function smooth() { let scrollContainer = document.querySelector('your-selector'); scroll = new LocomotiveScroll({ el: scrollContainer, smooth: true }); setTimeout(() => { scroll.update(); }, 500); // 500 is 0.5s of wait for scroll to update after calling it, you can change it to make sure that it run after new DOM has loaded otherwise scroll.update() will run but before new DOM has loaded and will have no effect on new DOM / content } // calling scroll on first load let scroll; // when ever you are leaving the current page, destroy the scroll before leave scroll.destroy(); // when ever you are entering new page, call smooth function after new DOM has loaded that will update your scroll smooth();

快乐编码