TanStackT
TanStack•4y ago•
2 replies
progressive-amaranth

What does scrollMargin do ?

I was going through react , dynamic example for beta version. In that I came across this code 
const RowVirtualizerDynamicWindow = () => {
  const parentRef = React.useRef<HTMLDivElement>(null)

  const parentOffsetRef = React.useRef(0)

  React.useLayoutEffect(() => {
    parentOffsetRef.current = parentRef.current?.offsetTop ?? 0
  }, [])

  const virtualizer = useWindowVirtualizer({
    count: sentences.length,
    estimateSize: () => 45,
    scrollMargin: parentOffsetRef.current,
  })

  return (
    <div ref={parentRef} className="List">
      <div
        style={{
          height: virtualizer.getTotalSize(),
          width: '100%',
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map((virtualRow) => (
          <div
            key={virtualRow.key}
            data-index={virtualRow.index}
            ref={virtualizer.measureElement}
            className={virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              transform: `translateY(${virtualRow.start}px)`,
            }}
          >
            <div>
              <div>Row {virtualRow.index}</div>
              <p>{sentences[virtualRow.index]}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}


Here I could not understand why we are passing scrollMargin to useWindowVirtualizer
Was this page helpful?