Allow for extra padding in the header

[alesmenzel]

Hi, I am often encountering designs, which require some form of header before a table, where the header is part of the scrollable area. When trying to virtualize the rows of the table below this header, the TanStack Virtual counts the header height into the range of which rows should be visible, causing hiding of rows, which are still visible. So far I have been using the overscan: X workaround to render more items above the fold, but it is rather a hacky solution with the downside that I render more items below AND after which is unnecessary.

Here is a repro: https://tanstackvirtualn4fmgh-y3ym--5173--134daa3c.local-credentialless.webcontainer.io/
(https://stackblitz.com/edit/tanstack-virtual-n4fmgh?file=src%2Fmain.tsx,src%2Findex.css&preset=node)

Notes around current options

• Initial offset
  • only sets the initial value, does not solve the problem
• scrollMargin
  • according to desc. seems to be solving the same issue, but it does not work (?) it adds extra margin from top
• Padding start
  • works the same way as scrollMargin (?)
• Scroll padding start
  • same issue

Potential workarounds

• Custom range extractor that will handle the extra space. I feel like this is something that should be part of the library.

Some suggestions how it could be implemented

• Allow specifying an scrollOffset that would be subtracted from the actual offset to calculate the correct range.
• Allow overriding getScrollOffset() to subtract the height by users, this would be more useful as users could get the ref of the header and provide the actual height instead of static size. Dynamic headers would be updated on scroll.
• Allow specifying an getListEl()which would mark where the actual list begins as there is usually some list wrapper element and calculate the difference between listEl and scrollEl. By default it could use the getScrollElement() to not break current implementations.

[alesmenzel]

So, the main issue here is probably that my list uses relative position, therefore all rows are positioned from the list rather from the top of the scroll element, moving the position: relative to the actual scroll element and then using paddingStart works, but feels hacky, as any change to the space above will cause to render the items incorrectly.

[Wordllban]

I faced the same issue, posted workaround on my discussion, here:
#847

It is not that fancy as it could be, but at least it works fine

[piecyk]

@alesmenzel @Wordllban for this cases the scrollMargin options should be use, as the elements should be position in context of container we need to subtract this value from start.

https://stackblitz.com/edit/tanstack-virtual-ffmfj3?file=src%2Fmain.tsx,package.json&preset=node

[Wordllban]

thats great, I have tried to use scrollMargin but with just some hardcoded value, it was not working and breaking layout
resize detector seems handy, thank you

[Wordllban]

I would like to add note in documentation that user need to minus scrollMargin in transform, so the item will be properly placed
Because it is not intuitive

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

What you think?

[piecyk]

That’s a great idea! I’d be happy to accept any PR that includes this improvement.

[alesmenzel]

Great answer. What I ended up doing based on @piecyk ´s solution is to get the list´s offset from top of the scroll area and use that -> that way I don't need to change the calculation in case I decide to add another element into the header. Would definitely deserve a mention in the docs thought 👍

[Wordllban]

Created a pull request to update docs. I would be happy to get feedback from you guys
#862