Scrollbar.limit.y calculated wrong

[pttnx]

Checks

• Not a duplicate.

Version

8.7.4

Description

** When scrolling down to the bottom of the page, the container seems to be longer, as it really is. When scrolling down again, the limit updates, but breaks other plugins functions. Page is using Barba for dynamic Content loading.**

Steps to Reproduce

1. Scroll down to the bottom - container is longer then it should
2. Scroll down again and the container height gets updated.

Online Demo

No response

[Daofeng Wu]

Not familiar with the library you are using, but I think manually calling scrollbar.update() after contents changed would solve this issue.

[pttnx]

actually, this happens without switching the pages. Just found out this happens on both, top of the scroll-container and the bottom. I could provide a link to the stage if you would like to have a look.

[Sadegh Barati]

are you Zoom back the browser? when you zoom back between 50% - 25%, scrolling is tough.

use debounce or throttle on window resize and call this method scrollbar.update()
also on page transition switch

[pttnx]

no, its simple scrolling. feel free to take a look:

---

i added a console.log, which returns the limit, scroll down fast, until you hit the bottom, then scroll down again. The value suddenly updates

[Daofeng Wu]

Thanks for the demo!

It is the lazyload animation/transition that causes the problem. Images are transformed by translateY(100%) before loading and translateY(0%) after loaded, thus affecting thescrollHeight. The easiest way to fix this issue is to "clip" those content via:

main {
  overflow: hidden;
}

FYI: this issue also occurs on native scrollbars as we are using the same mechanism to calculate dimensions

Kapture.2022-03-03.at.14.51.14.mp4

[pttnx]

that worked like a charm. thanks !