locomotivemtl/locomotive-scroll

Fix for Height Update when Dom Elements change Height

MikeHantha opened this issue · 7 comments

MikeHantha commented

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 commented

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

  • 👍1
  • ❤️1
  • 🚀1
alexanderkryska commented

Thank you very much! Great fix!

RasulAkhundov commented

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 commented

It indeed works!!! Thanks brother

fpanneton commented

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

dimarogkov commented

You are god!

alisafa1371 commented

@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]")
);
  • 👍3