Scrolling up in Lit example stutters and resets scroll
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.1k
- Forks
- 466
- Avg merge
- 2d 31m
- Merged PRs (30d)
- 13
Description
Describe the bug
I was having problems with my Lit virtualizer stuttering when scrolling back up through a dynamic list and couldn't understand why the example worked, but mine did not. So I updated the height of the items in the example, and it started to break like mine. It seems the example only works well because each item takes up most of the scroll element.
Your minimal, reproducible example
https://tanstack.com/virtual/latest/docs/framework/lit/examples/dynamic?panel=sandbox
Steps to reproduce
- Open the Lit dynamic example: https://tanstack.com/virtual/latest/docs/framework/lit/examples/dynamic?panel=sandbox
- Change the lorem ipsum generator to make shorter sentences ex.
faker.lorem.sentence(randomNumber(1, 20)) - Scroll down a ways and then scroll back up. It will start stuttering and reseting scroll. This gets worse the larger the difference in height between items.
Expected behavior
There should not be any stutter.
How often does this bug happen?
Often
Screenshots or Videos
No response
Platform
- OS: Mac
- Browser: Chrome
tanstack-virtual version
v3
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
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 Lit dynamic example linked in the issue and reproduce the problem by shortening the generated sentences. Compare scrolling behavior with items of different heights, then inspect the virtualizer path used by that example. Done means scrolling back upward remains smooth and does not reset the scroll position.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100