Virtual Scrolling

Large lists fail in boring ways: 50000 rows create expensive layout, style, paint, memory, and accessibility-tree work before the user sees the first screen. Virtual scrolling keeps the scroll height real while rendering only the rows near the viewport.

Fixed Height Windowing

The simplest virtual list assumes every row has the same height. From there, the math is deterministic: divide scrollTop by itemHeight, calculate how many rows fit in the container, then render that slice.

type WindowRange = {
  startIndex: number;
  endIndex: number;
  offsetTop: number;
  totalHeight: number;
};

export function getVirtualRange(
  itemCount: number,
  itemHeight: number,
  containerHeight: number,
  scrollTop: number,
  overscan = 4,
): WindowRange {
  const visibleStart = Math.floor(scrollTop / itemHeight);
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  const startIndex = Math.max(0, visibleStart - overscan);
  const endIndex = Math.min(itemCount, visibleStart + visibleCount + overscan);

  return {
    startIndex,
    endIndex,
    offsetTop: startIndex * itemHeight,
    totalHeight: itemCount * itemHeight,
  };
}

The outer container scrolls normally. Inside it, a spacer establishes total height, and the visible rows are translated down by offsetTop.

Rendering Shape

type Item = { id: string; label: string };

export function getVisibleItems(items: Item[], range: WindowRange) {
  return items.slice(range.startIndex, range.endIndex).map((item, offset) => ({
    item,
    absoluteIndex: range.startIndex + offset,
  }));
}

Overscan renders a few extra rows above and below the viewport. Without it, fast scrolling can reveal blank gaps because the browser paints before your next state update lands.

Native Shortcut

CSS content-visibility: auto lets the browser skip rendering off-screen content while keeping layout simpler. It is excellent for long article pages, feeds with predictable independent sections, and static content. It is less useful when you need precise keyboard navigation, dynamic row measurement, sticky subheaders, or full control over how many elements exist in the DOM.

Further Learning

Search these terms to go deeper:

• “virtual scrolling fixed height algorithm” — row window calculations and spacer layout
• “react window virtualization” — production implementation patterns
• “CSS content-visibility auto” — native off-screen rendering optimization
• “virtualized list accessibility” — keyboard and screen reader constraints in windowed lists

Virtual Scrolling

Say you need to show a list of 50,000 items. If you put all 50,000 on the page at once, the browser chokes — that’s a lot of elements to build and keep in memory. Virtual scrolling is the trick: only actually render the handful of rows the user can currently see.

The core idea

The user thinks they’re scrolling through 50,000 rows, but at any moment maybe 20 fit on screen. So why render the other 49,980? Virtual scrolling:

1. Makes the scrollbar the correct height (as if all rows existed).
2. Only renders the ~20 rows currently visible.
3. As you scroll, it swaps in the rows you’re now looking at.

It’s like a movie set — only the room the camera’s pointing at is actually built.

The simple math

If every row is the same height, figuring out which rows to show is just arithmetic:

// how far you've scrolled ÷ row height = first visible row
const firstVisible = Math.floor(scrollTop / rowHeight)
// how many rows fit in the visible area
const visibleCount = Math.ceil(containerHeight / rowHeight)

Render that slice, and push it down by the right amount so it lines up with the scrollbar.

The easy modern option

Before reaching for full virtual scrolling, try the CSS property content-visibility: auto. It tells the browser to skip rendering off-screen content automatically — no JavaScript needed. It handles long articles and simple feeds beautifully.

In one sentence

Virtual scrolling renders only the rows currently on screen (while faking the full scrollbar height) so huge lists stay fast — but try CSS content-visibility: auto first, since it does this automatically for many cases.

Want to go deeper?

Switch to Expert mode above for the full windowing calculation, overscan, and the react-window library.