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

我认为在动态页面加载而不加载浏览器并使用某个第三个库或路由器系统后，您会遇到这个问题。您可以共享堆栈或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();

​

快乐编码