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 :)