Virtualize

The simplest setup: an in-memory Items collection and a fixed ItemSize (the size of every item in pixels along the scroll axis). Only the rows in view, plus OverscanCount extra rows on each side (3 by default), exist in the DOM, so this list of one million rows scrolls instantly to anywhere. The list scrolls inside its own element, so give it a height (here through a CSS class).

Instead of Items, an ItemsProvider function loads the data window by window. Whenever the rendered range moves, it receives a request with the StartIndex and Count of the items needed and returns them along with the TotalItemCount. A request made obsolete by further scrolling gets its CancellationToken cancelled, and loaded items are cached, so scrolling back does not load them again.

LoadingTemplate shows until the first window arrives. After that, PlaceholderTemplate fills the slot of every item still loading; it receives the item's Index and reserved Size. While a request is in flight, the list is marked aria-busy for assistive technologies. A simulated latency of 500ms makes both templates visible. With more than one template, the item template is given as ItemTemplate, the alias of the ChildContent.

When items cannot share one size, turn on Dynamic. Every rendered item is then measured in the browser and its real size is remembered, while items not rendered yet are assumed to be EstimatedItemSize pixels (the closer to the average, the more accurate the scrollbar). When an item above the viewport turns out bigger or smaller than estimated, the scroll position is corrected so the content you are reading never jumps.

Horizontal lays the items out along the x-axis so the list scrolls sideways, and ItemSize becomes the width of each item. Everything else (dynamic sizes, providers, sticky items and the scrolling methods) works the same way.

InitialIndex opens the list at a given item (item 500 here). From code, ScrollToIndexAsync brings an item into view with an alignment: Start, Center, End, or Auto, which moves as little as possible and not at all when the item is already visible. It can also animate smoothly. ScrollToOffsetAsync and ScrollByAsync work in pixels, and ScrollToStartAsync / ScrollToEndAsync go to the very edges. A scroll requested before the list is ready, for example while its data is still loading, is applied as soon as it is.

OnVisibleRangeChanged reports the index of the first visible item and the index just past the last one whenever they change.

Every rendered item carries its position in the whole list (aria-posinset and aria-setsize), so a screen reader announces "article 12 of 10,000" even though only a few items exist in the DOM. By default the list is a list of listitems. Role and ItemRole change that, here to the feed pattern of articles, and AriaLabel names the list.

Tab into the list and use the arrow keys, PageUp / PageDown, Home and End. Focus moves between the items and only the focused one is tabbable (a roving tabindex). The list scrolls to keep it in view, even when it jumps to an item that was not rendered yet. Keys pressed inside an item's own controls are left to them.

HeaderTemplate and FooterTemplate render before the first item and after the last one, inside the scroll container, so they scroll along with the items; every offset (scrolling methods, sticky items, the scroll anchoring) takes their size into account. EmptyTemplate replaces the items when there are none; empty and refill the list with the buttons.

This feed has no known total. OnEndReached fires when the last item comes within ReachedThreshold items of the visible window, and it fires only once per item count. The handler appends the next batch to the collection and calls RefreshDataAsync (passing a new collection works as well), which lets it fire again the next time the end comes into view. The FooterTemplate shows the loading state at the end of the list.

The contacts are grouped A-Z. IsStickyItem marks the group headers: the header of the current group stays pinned to the top of the viewport while its group scrolls, and the next header pushes it out as it arrives. StickyTemplate can render the pinned copy differently (here with a shadow). The pinned copy is hidden from assistive technologies, which still find the real header in its place in the list.

Without an ItemKey, the rendered rows are identified by their index. Inserting an item then hands every following row's DOM element and component state to a different item. With an ItemKey, each row keeps its own state (tick a few checkboxes, then add or remove tasks), measured sizes follow their items, and the item at the top of the viewport stays in place when items are added or removed above it. Scroll down a little first to see that: at the very top the list stays at the top and shows the new items.

With Reversed the list starts at the newest message, and while you are at the bottom it stays there as messages arrive. Scroll up and OnStartReached prepends older history while the viewport stays exactly where it was (with an ItemKey, the message in view is tracked across the insertion). New messages arriving while you read the history do not move it; the button brings you back down with ScrollToEndAsync.

AlignToEnd keeps a conversation too short to fill the viewport at the bottom, like a chat app does. Start a new conversation to see it.

Style and Class apply to the root element, which is also the scroll container. Styles and Classes reach the individual parts: the root, the header and footer, the wrapper of every item, the pinned sticky item, and the loading and empty containers.

Style & Class:

Styles:

Classes:

With Dir set to Rtl, a horizontal list starts at the right edge and scrolls to the left, and the arrow keys follow the reading direction (ArrowLeft moves to the next item).