vlist

Pure vanilla JavaScript — no dependencies. The simplest way to use vlist with just HTML, CSS, and JS.

Same list as Basic but using vlist/core — 7.3 KB instead of 42.3 KB (83% smaller). No selection, groups, compression, or async adapter.

Chat-style message feed with 4 different item heights via height: (index) => number. Date headers, short, medium, and long messages.

Chat-style messaging with reverse: true. Starts scrolled to bottom, loads older messages at the top via prependItems(), auto-scrolls on new messages. Send messages or scroll up to load history.

Single and multiple selection modes with keyboard navigation. Click items or use arrow keys to navigate.

Async data loading with simulated API calls. Scroll to automatically load more items with customizable delay.

Push vlist to the limit with 1–5 million items. Monitor FPS, DOM nodes, and compression in real-time.

Smart loading that skips requests when scrolling fast and loads immediately when velocity drops.

Virtualized 2D photo gallery with 1,000 real photos from Lorem Picsum using layout: 'grid'. Configurable columns and gap. Only visible rows are rendered — images load on demand as you scroll.

Grouped contact list with sticky section headers. Items are grouped by last name initial using groups.getGroupForIndex. Headers stick to the top and transition smoothly — like iOS Contacts.

Document-level scrolling with scrollElement: window. The list sits in the normal page flow — no inner scrollbar, just the browser's native scrollbar.

Navigate away and come back without losing your place. Uses getScrollSnapshot() and restoreScroll() with sessionStorage — scroll position and selection are perfectly restored.