机车滚动元素在实时服务器上崩溃和消失

问题描述

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

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

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

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

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

解决方法

我们必须检测要加载的图像和大型资产您应该使用 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();
  });