Window based virtualization
I'm working on a scenario where I have an outer virtualized list, and each item in the outer list contains an inner list. Here's the setup:
The outer virtualized list has a fixed height (e.g., 500px) and scrolls within its container.
Each inner list is not virtualized and can exceed the height of the outer list's viewport.
I want to avoid rendering items in the inner list that are not visible within the viewport of the outer container.
Key Constraints:
I cannot combine the outer and inner lists into a single flattened list because each inner list is wrapped in a container <div> that renders the inner list separately.
Question:
Is there a way to achieve this using TanStack Virtual, such that the rendering of the inner list is dynamically controlled based on the outer container's scroll position?
Any guidance or examples would be greatly appreciated!
0 Replies