Dynamic item height + smooth scroll

[romankoho]

I have troubles combining dynamically sized items with scrollToIndex().
Every item within my virtualized list can be expanded. Thus, I'm using measureElement to dynamically measure the height of each entry.
However, I would like to combine it with a smooth scrollToIndex method. This is not working. But iff I don't pass the scrollToFn function to useVirtualizer, rowVirtualizer.scrollToIndex() works but obviously withouth smooth scroll animation.

Can someone please guide me what I could possibly do wrong?
Thanks!

  const scrollToFn: VirtualizerOptions<HTMLDivElement, HTMLDivElement>['scrollToFn'] = React.useCallback(
    (offset, canSmooth, instance) => {
      const duration = 1000
      const start = parentRef.current?.scrollTop || 0
      const startTime = (scrollingRef.current = Date.now())

      const run = () => {
        if (scrollingRef.current !== startTime) return
        const now = Date.now()
        const elapsed = now - startTime
        const progress = easeInOutQuint(Math.min(elapsed / duration, 1))
        const interpolated = start + (offset - start) * progress

        if (elapsed < duration) {
          elementScroll(interpolated, canSmooth, instance)
          requestAnimationFrame(run)
        } else {
          elementScroll(interpolated, canSmooth, instance)
        }
      }

      requestAnimationFrame(run)
    },
    []
  )

  const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLDivElement>({
    count: allRows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,
    initialOffset: expandedIndex ? expandedIndex * 100 + 10 * expandedIndex : 0,
    overscan: 5,
    gap: 10,
    //scrollToFn -> if I pass this function, then rowVirtualizer.scrollToIndex(randomIndex, { align: 'start' }) does not work
  })

return (
<div className='flex flex-1 flex-col min-h-full w-full'>
      <div>
        <button
          onClick={() => {
            rowVirtualizer.scrollToIndex(randomIndex, { align: 'start' })
          }}
        >
          Scroll To Random Index ({randomIndex})
        </button>
      </div>

      <AutoSizer>
        {({ height, width }: { height: number; width: number }) => (
          <div
            ref={parentRef}
            className='w-full h-full no-scrollbar'
            style={{
              height: height,
              width: width,
              overflow: 'auto'
            }}
          >
            <div
              style={{
                height: `${rowVirtualizer.getTotalSize()}px`,
                width: '100%',
                position: 'relative'
              }}
            >
              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
   
                return (
                  <div
                    key={virtualRow.index}
                    data-index={virtualRow.index}
                    ref={rowVirtualizer.measureElement}  // -> this is important for measuring dynamically changing the size of the item
                    className='flex flex-col'
                    style={{
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      width: '100%',
                      // height: `${virtualRow.size}px`,
                      transform: `translateY(${virtualRow.start}px)`
                    }}
                  >
                      <Row index={virtualRow.index} item={allRows[virtualRow.index]} />
                  </div>
                )
              })}
            </div>
          </div>
        )}
      </AutoSizer>
    </div>
)