Chat UIs Are Lists Until They Aren't

TanStack Virtual has released a new feature enabling reverse infinite scroll for chat interfaces, addressing the unique scrolling behaviors required by modern chat UIs. The update introduces `anchorTo: 'end'` and `followOnAppend` properties that automatically keep the viewport pinned to the latest messages when users are at the bottom, while preventing incoming messages from disrupting users who have scrolled up to read history. This eliminates the need for developers to manually manage scroll math, column-reverse CSS, or inverted transforms when building chat applications.

by Tanner Linsley on May 25, 2026. In the last TanStack Virtual release, I left one thing on the table: reverse infinite scroll for chat, and it deserved its own pass. Chat used to be a niche UI, now it's everywhere, in support inboxes, activity logs, multiplayer feeds, copilots, AI agents, and streaming assistants. They all look like lists, but they don't behave like the lists virtualization libraries were originally built around. A normal virtual list is start-anchored, so the top of the content is the stable point. You scroll down, append more rows, measure dynamic heights, and everything mostly works. Chat flips that contract. That last part matters. If someone scrolls up to read history, incoming messages shouldn't yank them back to the bottom, and if they're already there, the UI should stay pinned without every app rewriting the same scroll math. TanStack Virtual now has a first-class way to model that. js const virtualizer = useVirtualizer { count: messages.length, getScrollElement: = parentRef.current, estimateSize: = 72, getItemKey: index = messages index .id, anchorTo: 'end', followOnAppend: true, scrollEndThreshold: 80, } js const virtualizer = useVirtualizer { count: messages.length, getScrollElement: = parentRef.current, estimateSize: = 72, getItemKey: index = messages index .id, anchorTo: 'end', followOnAppend: true, scrollEndThreshold: 80, } anchorTo: 'end' tells the virtualizer that the end of the list is the edge you want to preserve. When you prepend older messages, TanStack Virtual captures the currently visible item, finds the same keyed item after the data changes, and adjusts the scroll offset so it stays in the same visual position. That means no column-reverse, no inverted transforms, and no manual scrollTop += delta bookkeeping in every app. Just normal data: js setMessages current = ...olderMessages, ...current js setMessages current = ...olderMessages, ...current The only real requirement is a stable key: js getItemKey: index = messages index .id js getItemKey: index = messages index .id Index keys can't make prepend stability work, because after a prepend every old item moves to a new index, and the virtualizer needs to know which message is still the same message. followOnAppend handles the "stay at latest, unless I am reading history" rule. If the user is already near the end, appended messages keep the viewport pinned, and if they've scrolled up, new output lands below without stealing their place. followOnAppend: true followOnAppend: true You can also pass a scroll behavior: followOnAppend: 'smooth' followOnAppend: 'smooth' The threshold is configurable too: scrollEndThreshold: 80 scrollEndThreshold: 80 That same end-state logic is exposed for UI: virtualizer.isAtEnd virtualizer.getDistanceFromEnd virtualizer.scrollToEnd virtualizer.isAtEnd virtualizer.getDistanceFromEnd virtualizer.scrollToEnd So your "Jump to latest" button can use the same rules as the virtualizer itself. The modern version of chat isn't append-a-message, it's append a message and then resize it dozens or hundreds of times while tokens stream in. Without end anchoring, the scroll height grows but the scroll offset doesn't, so the user slowly drifts away from the bottom. With anchorTo: 'end', if the viewport was pinned before the last item grew, TanStack Virtual applies the size delta and keeps the end pinned. That's the point of this feature: the common chat behaviors aren't userland chores anymore. This still isn't a chat component. TanStack Virtual still doesn't render bubbles, loaders, timestamps, avatars, unread dividers, or composer UI. That part belongs to your app. What it does now is handle the scroll physics that almost every chat UI needs: It's a small API with a pretty big ergonomic win. There is also a new Chat guide /virtual/latest/docs/chat and a React chat example /virtual/latest/docs/framework/react/examples/chat showing history prepends, appended messages, streaming replies, and a "Latest" control built with scrollToEnd . Chat is one of the dominant UI patterns of modern apps now, and TanStack Virtual should make it feel boring to build.