some sections of page are hidden

[ranjitgalsar]

Locomotive smooth scroll hides some sections of the page at the bottom, or sometimes the whole page is crashed. it happens in my all websites.

[TonyCastillo]

any solutions for this issue?? The same happens to me. But I see when the windows, i mean, when the explorer is resize is working fine.

[umberto02]

Hi, I also have the same problem. Is there a solution?

Thanks

[remi-lebigre]

From what I understand, locomotivescroll calculates your page height on initialization. Some content may have not finished to load and change page height afterwards (for example image loading). When implementing locomotivescroll, I ensure all images have been downloaded and I set a small timeout before initializing the library. I am not sure this is the right way to do though, I would gladly hear the maintainers' point of view.

[ranjitgalsar]

any solutions for this issue?? The same happens to me. But I see when the windows, i mean, when the explorer is resize is working fine.

use setTimeout with DOMContentLoaded event is working sometimes but it's not an ideal way.

[umberto02]

Hi, can you post an example.

Thanks for your help

[remi-wakeo]

Here is my current implementation:

  initScrollOnImageLoad = _ => {
    Promise.all([...this.container.querySelectorAll('img')]
      .filter(img => !img.complete)
      .map(img => new Promise(resolve => {
        img.onload = img.onerror = resolve
      }))).then(this.initScroll)
  }
  initScroll = _ => {
    setTimeout(_ => {
      this.locomotive = new LocomotiveScroll({
        el: this.container.querySelector('[data-scroll-container]'),
        smooth: true,
      })
    }, 200)
  }

I have not found a better way than adding an arbitrary 200ms delay.

[TonyCastillo]

Yes, it's like Mario says it. locomotivescroll calculates your page height on initialization. So I implent this on my project and is working fine.

window.addEventListener("load", function(event) { let lazyScroll = new LocomotiveScroll({ el: document.getElementById("main-content-scroll"), smooth: true });

[umberto02]

I finally figured out the error between the height and image upload. But I still have the same problem, as using GSAP Scrolltrigger I can't integrate your scripts.

I'll give you an example of my structure:

`const locoScroll = new LocomotiveScroll({ el: document.querySelector("#js-scroll"), smooth: true, lerp: .07, });

locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy("#js-scroll", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: document.querySelector("#js-scroll").style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh();`

Can you help me?

Thanks