Unable to scroll down with nested virtualizers

[johnhok]

I have a code example of nesting virtualizers but there is an issue where I'm unable to scroll down when I near the 2nd entry:
https://stackblitz.com/edit/tanstack-virtual-nl5nrv?file=src%2Fmain.tsx

Here is a screenshot of the virtualized areas. So the rows and the entries within the rows are virtualized.

An example of the problem when scrolling down:

CleanShot.2024-11-07.at.07.26.00.mp4

From what I understand react-virtual can handle this use case so I figured I am missing some aspect of implementation here that is causing the problem. Any extra eyes on insights would be appreciated, thanks!

[piecyk]

Looks like something of when you use overscan: 0 basic this option means how many elements are extra render outside the view port, setting it to 1, fixes the issue https://stackblitz.com/edit/tanstack-virtual-tjtt7v?file=src%2Fmain.tsx,package.json

[johnhok]

This doesn't appear to work if mockData has more than 2 entries though. It feels like maybe there's a calculation issue when the parent level virtualizer is removed from the DOM.

[piecyk]

hmm really strange, did something simliar in past and was working without any issues.

[piecyk]

Ok, it's connected to initialOffset basic when child virtualizer is mounted we scroll to that value https://github.com/TanStack/virtual/blob/main/packages/virtual-core/src/index.ts#L491-L494 that's the reason of jumping to top when scrolling.

[johnhok]

Ah I see it working in your example now. Thanks!