useWindowVirtualizer creates some empty space on scroll

[altpad]

Im trying to use useWindowVirtualizer on an element which has few header elements on top of it, when you scroll it leaves some empty space on top of the viewport, Is there any way to fill that space with other rows?

here's a link to reproduce https://codesandbox.io/s/virtual-window-scroll-vb9uqz

[wscotten]

Hello @altpad did you ever resolve this issue? I am facing a similar issue.

[piecyk]

@altpad @wscotten in this case you need to pass scrollMargin to the virtualizer. That is the space from the start of the page till the virtualizer.

[piecyk]

fyi when scrollMargin is used, it will be added to item position, so basic if rows are position absolute to some div not to page it self, then we need to substart it from start

transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`,

[Yash-Mangal2]

Add this it will work
<div style={{ height:${rowVirtualizer.getTotalSize()}px, width: "100%", position: "relative", contain: "strict", }} >