javascript - 机车滚动元素在滚动和页脚被切断时消失

Question

我使用机车滚动创建了一个站点，该站点运行良好，直到我上传到实时服务器为止。在实时服务器上，元素有时会相互碰撞，然后闪烁并消失，页脚也被切断。似乎元素的位置没有正确更新，因此在滚动时它们会出现此故障。

我认为这一定是一个负载问题，因为有时它很好，如果我调整有时修复它的浏览器的大小。加载元素后，我可能需要在滚动条上执行更新（）。

我希望调整下面的代码，以便检查页面 DOM 是否已加载，但我不确定如何将其从超时更改为检查页面加载。

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,
   });




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

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