Is there anyway to avoid the absolute positioning of virtualized items?

[lexahall]

In the offical docs I consistently see a wrapper div around the virtualized items that looks like so:

<div
       style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              transform: `translateY(${items[0].start}px)`,
       }}
>

Unfortunately, this causes issues for the contextual menu that I have on each of my items. Is there anyway to avoid this form of placement? Has anyone done something different?

[piecyk]

Yes, rather to position each element we can move it as whole group. We use this approach for table, where we can't position absolute rows.

const List = () => {
  const virtualizer = useWindowVirtualizer({
    count: 1000,
    estimateSize: () => 24,
  })

  const items = virtualizer.getVirtualItems()

  const [paddingTop, paddingBottom] =
    items.length > 0
      ? [
          Math.max(0, items[0].start - virtualizer.options.scrollMargin),
          Math.max(0, virtualizer.getTotalSize() - items[items.length - 1].end),
        ]
      : [0, 0]

  return (
    <div>
      <div
        style={{
          paddingTop,
          paddingBottom,
        }}
      >
        {items.map((item) => (
          <div
            key={item.key}
            data-index={item.index}
            ref={virtualizer.measureElement}
          >
            <div>{item.index}</div>
          </div>
        ))}
      </div>
    </div>
  )
}

[lexahall]

Thanks so much! This worked :)

[MTG2000]

Hey @piecyk
Thanks for suggesting this solution, it definitely works!

However, the performance seems to be bad (jittery) when implemented with padding.
I suspect it's because changing the padding value causes the browser to re-calc the layout on each scroll event which is much more expensive than transform

Is there a recommended way around this issue?
I don't think throttling/debouncing will help (especially considering they will make scrolling feels unresponsive)

Thanks a lot!

[bennobuilder]

You can use transform if you prefer, but whether its a "recommended" way I can't tell.

I use transform to position absolute elements in a more complex "list". A video editor timeline.
As long as you measure the elements correctly, TanStack virtual works no matter how you want your list to look like (In my experience).

cheers :)

[piecyk]

@MTG2000 that's interesting, overall it's pretty hard to get reliable comparison between those two, while using both didn't notice any big performance difference. Maybe something is interfering with scroll, did you disable overflowAnchor if you could provide an example we can debug more.

[Regnar110]

Above answer is not working with native html table elements like where display: table is used instead of display: block like divs.
Is there any solution for this also ? :)

[piecyk]

@Regnar110 yes, something like this

 <tbody>
  {paddingTop > 0 && (
    <tr>
      <td colSpan={colSpan} style={{ height: paddingTop }} />
    </tr>
  )}
  // virtual items
  {paddingBottom > 0 && (
    <tr>
      <td colSpan={colSpan} style={{ height: paddingBottom }} />
    </tr>
  )}
</tbody>

[andrewdoro]

A more hackish solution that works without position absolute and without padding logic.

Make a wrapper over your virtual item and give it height: 0px, then use the normal height and transform stylings for the inner child.

    <div
      style={{
        height: `${virtualizer.getTotalSize()}px`,
      }}
    >
      {virtualizer.getVirtualItems().map((virtualItem) => {
        return (
          <div
            key={virtualItem.key}
            style={{
              // position: "absolute", Without position absolute
              height: `0px`,
            }}
          >
            <div
              style={{
                height: `${virtualItem.size}px`,
                transform: `translateY(${virtualItem.start}px)`,
              }}
            >
              {virtualItem.index}
            </div>
          </div>
        );
      })}
    </div>