You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Certain changes to the DOM (adding/removing elements, changing size of elements) might cause the arrived state of a scrolling container to change, but arrivedState returned by useScroll doesn't reflect these changes.
First example in reproduction
you have:
a scrolling container with a max height of 300px
an element inside of height 800px
the container is scrolled to the very top
arrivedState will be { ..., bottom: false }
If the element inside's height shrinks down to 200px (click the toggle container height button) the container will not have any space to scroll down but arrivedState will not show this change
Second example in reproduction
you have:
a scrolling container with a max height of 300px
an element inside of height 500px:
the container is scrolled to the very top
arrivedState will be { ..., bottom: false }
if you suddenly remove the element inside (click the toggle red div button) the container will not have any space to scroll down but arrivedState will not show this change
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion.
I had a similar issue, I used the undocumented measure function to recalculate the arrivedState value.
I opened an issue to add measure to the documentation: #4266
Describe the bug
Certain changes to the DOM (adding/removing elements, changing size of elements) might cause the arrived state of a scrolling container to change, but
arrivedState
returned byuseScroll
doesn't reflect these changes.First example in reproduction
you have:
arrivedState
will be{ ..., bottom: false }
If the element inside's height shrinks down to 200px (click the
toggle container height
button) the container will not have any space to scroll down butarrivedState
will not show this changeSecond example in reproduction
you have:
arrivedState
will be{ ..., bottom: false }
if you suddenly remove the element inside (click the
toggle red div
button) the container will not have any space to scroll down butarrivedState
will not show this changeReproduction
https://stackblitz.com/edit/vitejs-vite-fdvkgx
System Info
Used Package Manager
npm
Validations
The text was updated successfully, but these errors were encountered: