Chapter 14: Example: Scroll Padding

Core Idea

This example virtualizes table rows below a measured table header. paddingStart accounts for the header in total geometry, while scrollPaddingStart keeps imperative targets clear of it.

Code Example

const [theadSize, theadRef] = useMeasure<HTMLTableSectionElement>()

const rowVirtualizer = useVirtualizer({
  count: 10000,
  getScrollElement: () => parentRef.current,
  estimateSize: React.useCallback(() => 35, []),
  overscan: 5,
  paddingStart: theadSize?.height ?? 0,
  scrollPaddingStart: theadSize?.height ?? 0,
})

<button onClick={() => rowVirtualizer.scrollToIndex(40)}>
  Scroll to index 40
</button>

• What it demonstrates: A measured fixed header participates in both list geometry and scroll alignment.

Key Takeaways

1. Measure UI that occupies the virtualized axis.
2. Use content padding and scroll padding for different responsibilities.
3. Reusing the header measurement keeps scroll-to-index behavior aligned with layout.

Connects To

• Ch 013: Content padding adds space but does not by itself define scroll alignment.
• Ch 019: The same row geometry works with a data table.