ceriousdevtech/cerious-scroll: High-performance virtual scrolling library with O(1) memory usage. Handles 100M+ elements at 60+ FPS with native variable heights, framework-agnostic design. Perfect for data grids, chat apps, log viewers, and financial das…

High-performance virtual scrolling library with O(1) memory usage. Handles 100M+ elements at 60+ FPS with native variable heights, framework-agnostic design. Perfect for data grids, chat apps, log ...

Summary

Cerious Scroll is a TypeScript virtual scrolling library that keeps only the visible window in the DOM, so memory and DOM usage stay bounded for datasets with millions of variable-height items. It ships with three layouts (absolute rows, native tables, and Masonry grids) and a framework-agnostic core plus React, Vue, and Angular wrappers.

What it is useful for

This library fits interfaces that cannot mount every item at once: data grids, chat windows, log viewers, media galleries, trading tickers, and analytics tables. It supports native scrollbar, wheel, touch, and keyboard navigation, with opt-in capabilities like pinned section headers, row snapping, edge-triggered infinite loading, aria-setsize and aria-posinset attributes for screen readers, RTL direction, and SSR hydration. Because row heights are measured on demand rather than precomputed, you can stream or mutate items without maintaining a full-dataset prefix sum.

How engineers can use it

Install with npm install @ceriousdevtech/cerious-scroll, or load the browser bundle from a CDN. Create a fixed-height host element, instantiate CeriousScroll with the item count and an onScroll callback, then call renderViewport from your render function and once at startup:

import { CeriousScroll } from '@ceriousdevtech/cerious-scroll';

const data = Array.from({ length: 10_000 }, (_, i) => ({ id: i, label: `Item ${i}` }));
const container = document.querySelector('#scroll-container');
let scroller;

function render() {
  scroller.renderViewport(container.clientHeight, container, (i, el) => {
    el.textContent = data[i].label;
  });
}

scroller = new CeriousScroll(container, data.length, { onScroll: render });
render();

Pick layout: 'table' for aligned <table> semantics with autoSizeColumns, or layout: 'masonry' for responsive card layouts. Masonry offers a canonical mode (a pure height function keeps cards in a stable column, with O(n) preprocessing) and a local mode (DOM-measured heights, O(1) landing, but columns may depend on the route). Documented constraints: programmatic navigation (jumpToElement, handleScrollPercentage) does not invoke onScroll, so call your render function manually afterwards; for dynamic lists, use updateTotalElements(count) to resize and dispose() to clean up; and for real Masonry cards, the README requires reserved image space, an idempotent renderItem, and delegated events. The README points to docs/IMPLEMENTATION_GUIDE.md and docs/ARCHITECTURE.md for full options, troubleshooting, and tuning; local development setup uses npm install, npm run build, npm test, and npx http-server . -p 8080.