Virtual Scroll

A high-performance virtualization library for Vue 3.

Documentation

Everything you need to know about integrating @pdanpdan/virtual-scroll into your Vue 3 applications. From basic list virtualization to advanced grid and SSR setups.

Get Started

Essentials

Essential

Vertical Fixed

Optimized for lists where every item has the same height.

View Example

Essential

Vertical Dynamic

Handles variable item heights automatically using ResizeObserver.

View Example

Essential

Vertical Fixed Body

Use the browser window as the primary scroll container.

View Example

Essential

Vertical Dynamic Body

Native window scrolling with variable item heights.

View Example

Essential

Horizontal Fixed

Full support for horizontal-only virtualization with fixed widths.

View Example

Essential

Horizontal Dynamic

Horizontal scrolling with variable, measured item widths.

View Example

Essential

Grid Fixed

Scroll simultaneously in both X and Y axes with virtualized columns.

View Example

Essential

Grid Dynamic

Bidirectional scroll with programmatic column widths using a function.

View Example

Features

Feature

Infinite Scroll

Automatic pagination and loading states when reaching end of content.

View Example

Feature

Scroll Restoration

Maintain scroll position seamlessly when items are prepended.

View Example

Feature

Sticky Sections

iOS-style pushing headers for segmented lists and grouped items.

View Example

Feature

SSR Support

Demonstrates pre-rendering and auto-scrolling to a specific range for SSR.

View Example

Feature

Custom Scrollbar

Replace native scrollbars with highly customizable virtual ones.

View Example

Feature

Independent Scrollbars

Use VirtualScrollbar components standalone to control any scrollable element.

View Example

Patterns & Recipes

Pattern

Chat Interface

Smooth auto-scrolling, history loading, and dynamic message heights.

View Example

Pattern

Table

Semantic HTML <table> virtualization for accessible data grids.

View Example

Pattern

Spreadsheet

Excel-like bidirectional grid with sticky row and column headers.

View Example

Pattern

Collapsible Tree

Virtualized hierarchical list with expandable/collapsible nodes.

View Example

Pattern

Draggable List

Reorder virtualized items using native drag and drop.

View Example

Pattern

Photo Gallery

Lazy-loaded image grid with bidirectional virtualization.

View Example

Pattern

Masonry Grid

Achieve masonry layout by combining multiple columns.

View Example

Pattern

Search & Highlight

Implement high-performance search across thousands of virtualized items.

View Example