加载时使用locomotive.js平滑滚动更新()

Question

我在wordpress网站上使用locomotive.js (https://locomotivemtl.github.io/locomotive-scroll/)。它工作得很好，直到我上传到一个实时服务器上。在实时服务器上，这些元素有时会相互碰撞，然后闪烁和消失，页脚也会被切断。

我认为这一定与页面未加载有关，我需要使用update()来检查页面是否已加载。但我不确定如何将其更改为检查页面加载而不是超时-有人能帮上忙吗？

function smooth() {
 let scrollContainer = document.querySelector('your-selector');
scroll = new LocomotiveScroll({
el: scrollContainer,
smooth: true    });

setTimeout(() => {
   scroll.update();
}, 500); 
}

Answer 1

我们必须检测图像和大型资产加载，您应该使用imageLoaded来检测所有图像加载，然后您必须更新卷轴，它应该工作正常

  const imagesLoaded = require("imagesloaded"); // import the library or can use cdn


  let scrollContainer = document.querySelector("[data-scroll-container]");

  var scroll;

  scroll = new LocomotiveScroll({
    el: scrollContainer,
    smooth: true,
    getSpeed: true,
    getDirection: true,
    offset:["15%",0]
  });




  /* update scroll (height) when all images are loaded */

  imagesLoaded(scrollContainer, { background: true }, function () {
    scroll.update();
  });