Scroll container with other content above virtualized list
I'm attempting to virtualize a list within a scrollable container but the scrollable container has content above the list
The list renders fine, but the virtualization only begins only where the first item is initially rendered when scrolled down.
https://codesandbox.io/p/devbox/funny-wildflower-yr2hvq?file=%2Fsrc%2FApp.tsx
1 Reply
fair-roseOP•2y ago
Configuring the
scrollMargin and the padding related values only pushes it down (where it starts), and if I apply negative value the items just shift upwards but first items just gets unmounted
What's the best strategy here? I could make the virtaulized container be absolute and move it to the top of the scrollable parent, but feels a bit hacky + would need to calculate the content height as it is dynamic. + quite difficult since the virtualized container is quite deeply nested down in the scrollable container (in actual code base)
I've managed to get it to work by getting the offsetTop of the virtualized item container and setting that as the scrollMargin and setting the transformY(${-containerOffset + virtualItems[0].start}) and that seems to work, not sure if it's the most optimal?