Scrollbar.limit.y calculated wrong
pttnx opened this issue · comments
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
- Scroll down to the bottom - container is longer then it should
- Scroll down again and the container height gets updated.
Online Demo
No response
Not familiar with the library you are using, but I think manually calling scrollbar.update()
after contents changed would solve this issue.
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.
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
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
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
that worked like a charm. thanks !