Skip to content

The scrollbar is code

The scrollbar is code

The browser's scrollbar has one requirement you cannot negotiate away: to scroll a tall document natively, the DOM has to be tall. At a million rows that means a fifty-million-pixel layer the compositor must carry, native scroll anchoring fighting your virtualization, and physics you don't control.

So this million-row list fires the browser from the job. Scrolling is virtual: a customized Lenis owns position, momentum and touch feel, driving a translateY — while the DOM holds a dozen rows between two spacer divs. The scroll range comes from a computed content height, not from the DOM; the compositor layer stays small no matter how long the list claims to be. Wheel through it, jump to the middle, and watch the rows-in-DOM counter hold:

The estimates architecture is the readable part: an item's position is a prefix sum over measured heights that is never materialized as an array — a movable cursor evaluates it lazily, heights are captured one-shot as rows enter and leave the window, and every operation is O(window), never O(total). The jump-to-row landing visibly converges as the fresh window measures in — an estimate refined by reality, in front of you.

All of it lives on one ivue class: template refs, prop refs, scroll state, the windowing math, the Lenis lifecycle — constructed in setup() and torn down by the component scope. This is not a demo component; it's extracted from production, where it drives feeds this size daily.

The full tabbed source — the ~1,200-line class included — is on the Examples page, with an Open-in-StackBlitz link that runs the standalone app straight from the repo.

Released under the MIT License.