Locomotive scroll elements disappearing on scroll and footer cut off

Question

I have made a site using locomotive scroll which worked perfectly until I uploaded to a live server. On the live server the elements sometimes bump into each other and then flicker and disappear and the footer is also cut off. It seems that the position of the elements isn't updating correctly so on scroll they have this glitch.

I'm thinking this must be a load issue, because sometimes it is fine and if I resize the browser that sometimes fixes it. Possibly I need to do an update() on the scroll once elements are loaded.

I looking to tweak the below code so that it checks to see if the page DOM has loaded but I'm not sure how to change it from timeout to checking page load.

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

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

Answer 1

You can use IntersectionObserver to update scroll as soon as document reach it's final height too.

      (function () {
        const scroll = new LocomotiveScroll({
          el: document.querySelector("[data-scroll-container]"),
          smooth: true,
          smoothMobile: false,
        });
        new ResizeObserver(() => scroll.update()).observe(
          document.querySelector("[data-scroll-container]")
        );
      })();

Answer 2

Yes you are right this happens due to images load issue, you have to update() on the scroll once elements are loaded.

To detect all images loaded or not use imageLoaded and after then you have to update the scroll, and it should work fine

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