useWindowVirtualizer shows a blank area when there are multiple virtualizers on page

Describe the bug

Hello, thanks for your time!

One potential bug: when using multiple useWindowVirtualizers on a single page, I noticed that between each list there is a large blank area and only the last few items are shown on the bottom list.

A quick inspection suggests that the problem is transform: translateY(${virtualRow.start}px) calculation doesn’t reset between each useWindowVirtualizers instance (each list on the page). When I change the value of translateY using the browser inspector and set it to 0 (or any other value based on the row height), the item is positioned correctly.

Your minimal, reproducible example

https://codesandbox.io/s/wispy-fire-boq7ft?file=/src/App.tsx

Steps to reproduce

scroll all the way to the bottom in the sandbox demo

Expected behavior

The virtualized content should be able to handle multiple virtualized lists on the same page.

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

macOS, Windows.

tanstack-virtual version

v3.0.0-beta.18

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.

[piecyk]

Hi @flowlyIL

Why does 2600 works? Because it’s the total height of the first list?

Yes, basic it’s the height of elements before the list. I would say better is to read and observe position of the list with ResizeObserver, something like https://codesandbox.io/s/festive-tdd-0mslhl?file=/src/App.tsx

[piecyk]

This would be fixed with https://github.com/TanStack/virtual/pull/409 Current list assumes that it starts from top and there is no other content.