fix(useScroll): trigger once onMounted
to get correct inital arrivedStates values
#3384
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Before submitting the PR, please make sure you do the following
fixes #123
).Description
Fix #2875
useScroll
have incorrect initial values forarrivedStates
(bottom & right arefalse
by default) and are not computed if the child is smaller than its parent (can't scroll at all anyway).Running the demo, it's easy to reproduce: just decrease the child dimensions here
vueuse/packages/core/useScroll/demo.vue
Lines 34 to 35 in 70a7f07
Before:
After:
Additional context
Following antfu proposition, I just triggered once
setArrivedState
when the component is first mounted.Edit: we might also want to watch for element resize for responsive purposes, but I'm not sure how would be the best way to use
useResizeObserver
here.🤖 Generated by Copilot at 2838f20
Improved
useScroll
function to initialize state and handle errors on mount, and to update state based on element's scroll properties.🤖 Generated by Copilot at 2838f20
tryOnMounted
function from@vueuse/shared
to execute callbacks on mount (link)setArrivedState
function with resolvedelement
argument to initialize scroll state on mount (link)