Features
- Add
scrollElementprop toListandGridfor lists and grids that scroll along with other content. Pass"window"to scroll with the page, or an ancestor element that scrolls. The list or grid renders at its full height and only renders the rows visible within the scroll element's viewport; its position within the scroll element is measured whenever it renders, scrolls, or resizes, and whenever content before it is resized, inserted, or removed (e.g. an image loading above it). Imperative scroll methods scroll the scroll element. Grid columns scroll with the scroll element too if the grid is as wide as its content (e.g.style={{ width: "max-content" }}); otherwise they scroll within the grid. Add a scrolling with the page page to the docs site. - Add
useVirtualizerhook for rendering custom (headless) virtualized content, e.g. a semantic<table>. It returns the items to render (with their offsets and sizes), the total size, the visible range, and ascrollToIndexmethod; options mirror the props ofList(includingscrollElementand dynamic sizes fromuseDynamicRowHeight). Add a useVirtualizer page to the docs site. - Add
useIsScrollinghook for tracking whether a list, grid, or scroll element is scrolling (e.g. to render simplified rows while scrolling). It uses the "scrollend" event where supported. Add a useIsScrolling page to the docs site (replacing the common question about scrolling indicators). - Scrolling to a row, column, or cell (
scrollToRow,scrollToColumn,scrollToCell, anduseVirtualizer'sscrollToIndex) respects the CSSscroll-paddingof the element being scrolled, like the browser'sscrollIntoView. For example,scroll-padding-topcan keep rows from being aligned underneath a sticky header. - Add an infinite loading page to the docs site.