Fix for Height Update when Dom Elements change Height

[MikeHantha]

Is your feature request related to a problem? Please describe. If the Dom Elements change their Height after locomotive scroll is initialised the height of the Scroll Container is wrong. So i wrote a Resize Observer that looks for height changes on the data-scroll-container if that one Triggers you can trigger a scroll.update() and the height is correct again. I guess this would be a quality of life upgrade for many Locomotive Scroll Users.

Describe the solution you'd like This is my Solution for it. new ResizeObserver(() => scroll.update()).observe(document.querySelector("[data-scroll-container]"))

[snowiewdev]

new ResizeObserver(() => scroll.update()).observe(document.querySelector("[data-scroll-container]"))

Great fix! Thanks. I suggest you submit a pull request to save us all, lol

[alexanderkryska]

Thank you very much! Great fix!

[RasulAkhundov]

Is your feature request related to a problem? Please describe. If the Dom Elements change their Height after locomotive scroll is initialised the height of the Scroll Container is wrong. So i wrote a Resize Observer that looks for height changes on the data-scroll-container if that one Triggers you can trigger a scroll.update() and the height is correct again. I guess this would be a quality of life upgrade for many Locomotive Scroll Users.

Describe the solution you'd like This is my Solution for it. new ResizeObserver(() => scroll.update()).observe(document.querySelector("[data-scroll-container]"))

Thank you so much. it's works

[voaneves]

It indeed works!!! Thanks brother

[fpanneton]

Thank for the fix i'm just wondering where to put that line ?

[dimarogkov]

You are god!

[alisafa1371]

@MikeHantha Thanks it was very good solution. after adding locomotive scroll to my project I had an empty space at the end of my body and I used your solution and it worked. I used it like below:

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

[bhishekprajapati]

Faced the same issue! I tried both of the solutions which are mentioned above but neither worked. After debugging for a while, I found the culprit!

I'm writing this for the tailwind devs out there who are likely to face the same issue again.

My TechStack:

• Vue 3 (cdn version)
• Tailwindcss v3.3.3
• Locomotive-scroll v4.1.4

Solution 1 (Didn't worked)

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

Solution 2 (Also, Didn't worked)

importing locomotive css styles

The culprit

Tailwindcss: The tailwindcss was cleaning up the unsed styles before sending the stylesheet to the browser. Since, locomotive css are dynamically added to html on runtime that's why tailwind finds them as unused classes and removes most of the locomotive css classes from the stylesheet.

The Fix

implement both the above mentioned solutions and add the below code in your tailwind config

// tailwind.config.js

module.exports = {
// some tailwind config ...
  safelist: [
    "html.has-scroll-smooth",
    "html.has-scroll-dragging",
    `[data-scroll-direction="horizontal"]`,
    ".c-scrollbar",
    ".c-scrollbar_thumb",
  ], // tailwind will not remove these classes 
};

Ref: https://tailwindcss.com/docs/content-configuration#safelisting-classes

[sirhenryhu]

new ResizeObserver(() => scroll.update()).observe(document.querySelector("[data-scroll-container]"))

This one totally saved my day!! Thank you, @MikeHantha , for providing this useful solution. You're the man.

[Rowdysign]

Any idea how that code looks like on ES version 5 ?

[chlxyz]

does anyone know how to implement it on next.js? my code is like this:

useEffect(() => {
    if (!preloader) {
      import('locomotive-scroll').then((LocomotiveScroll) => {
        const scroll = new LocomotiveScroll.default({
          smooth: true,
          multiplier: 0.3,
        });
        new ResizeObserver(() => scroll.update()).observe(
          document.querySelector("[data-scroll-container]")
        );
        const target = document.querySelector('#main');
        scroll.scrollTo(target);
      });
    }
  }, [preloader]);