Description
I am encountering an issue with the useScroll hook from Framer Motion when trying to set its target via a ref that is assigned using querySelector. The implementation works perfectly in CodeSandbox, but it fails in my local environment, where it always calculates the entire window height instead of the targeted element.
Steps to Reproduce:
Set up a project using Framer Motion and implement useScroll.
Use querySelector to target a specific div element and pass it to useScroll.
Observe the behavior in CodeSandbox (working) vs. local environment (not working).
Here’s a codesandbox link
https://codesandbox.io/p/sandbox/usescroll-framer-motion-issue-queryselector-4755kc
)
Expected Behavior:
The useScroll hook should calculate the scroll position relative to the targeted div.
Actual Behavior:
In the local environment, the hook calculates the scroll position based on the entire window height, rather than the targeted element.
Additional Information:
I observe on local environment usescroll gives this error
You have defined a container options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its layoutEffect: false option.
and when I use layoutEffect:false it will not change anything and still calculate whole page scroll progress.