Fix for Height Update when Dom Elements change Height
MikeHantha opened this issue · 7 comments
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]"))
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
Thank you very much! Great fix!
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
It indeed works!!! Thanks brother
Thank for the fix i'm just wondering where to put that line ?
You are god!
@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]")
);