TanStack / TanStack/virtual

Scrolling up in Lit example stutters and resets scroll

Open
#981 1 comment 2 reactions 0 assignees View on GitHub

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
  1. Open the Lit dynamic example: https://tanstack.com/virtual/latest/docs/framework/lit/examples/dynamic?panel=sandbox
  2. Change the lorem ipsum generator to make shorter sentences ex. faker.lorem.sentence(randomNumber(1, 20))
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.