2

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);
knittl
  • 246,190
  • 53
  • 318
  • 364
golds1981
  • 31
  • 1
  • 4
  • What have you tried to check why this is happening? Usually, there is no difference in running the same script on the same markup on different servers – Nico Haase May 02 '21 at 10:16
  • Hi, thanks for your response, it seems the server is definitely making the difference. I think I managed to solve it with an update on page load - for anyone that needs it try this. window.onload = function() { scroll.update() }; – golds1981 May 04 '21 at 08:41

1 Answers1

1

[> we have to detect images and large assets to load You should use

imageLoaded to detect all image loading 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,
    getSpeed: true,
    getDirection: true,
    offset:\["15%",0\]
  });




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

  imagesLoaded(scrollContainer, { background: true }, function () {
    scroll.update();
  });][1]
Dpk
  • 567
  • 5
  • 16