motiondivision / motiondivision/motion
[BUG] useScroll - Can't track element position when horizontally scrolled container
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
1. Read the FAQs 👇
✅
2. Describe the bug
When trying to track the position of an element inside a horizontally scrolled container it doesn't give the proper element value, instead it gives the progress for the container scroll progress.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
Forked directly from the sandbox provided here, which works with the same code as below sandbox, except below is horizontal instead of vertical.
https://codesandbox.io/p/sandbox/framer-motion-track-element-position-forked-xph5yn
4. Steps to reproduce
Open the Sandbox and scroll horizontally. Note that the progress-bars are filled but based on the container scroll progress, not the local target progress value.
5. Expected behavior
Elements being tracked for X-axis scroll should be possible just like Y-axis
6. Video or screenshots
N/A
7. Environment details
Tested in Chromium 122
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and inspect the useScroll entry point responsible for horizontal tracking, comparing its behavior with the working vertical case described in the issue. Done means horizontally tracked elements report their local target progress rather than the container's scroll progress.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100