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.
Configurator / Code Generator
Select the features you need and generate complete typed Vue code - component, composables, or a CodePen.
Comparison with Alternatives
How this library stacks up against other Vue 3 virtualization solutions.
Vertical Dynamic
Handles variable item heights automatically using ResizeObserver.
Horizontal Fixed
Full support for horizontal-only virtualization with fixed widths.
Grid Fixed
Scroll simultaneously in both X and Y axes with virtualized columns.
Grid Dynamic
Bidirectional scroll with programmatic column widths using a function.
Flow Table
Virtualized rows in a real flow table with dynamic heights and column-width modes.
Masonry Grid
Real masonry in one VirtualScrollMasonry container: responsive columns, canonical oracle heights and anchored reflow.
Infinite Scroll
Automatic pagination and loading states when reaching end of content.
SSR Support
Demonstrates pre-rendering and auto-scrolling to a specific range for SSR.
Custom Scrollbar
Replace native scrollbars with highly customizable virtual ones.
Independent Scrollbars
Use VirtualScrollbar components standalone to control any scrollable element.
Chat Interface
Chat with dynamic heights, an initial scroll to bottom, and history restoration when older messages are prepended.
Async Content
Virtualized feed whose rows fetch simulated content on demand, with a shared cache and auto-measured heights.
Live Streaming
A simulated market feed that mutates only the visible window of 5,000 virtualized symbols.
Spreadsheet
Excel-like bidirectional grid with sticky row and column headers and resizable cells.
Data Browser
Grouped directory pattern with iOS-style sticky section headers, instant search over a rebuilt section index and jump-to navigation.
Code Viewer
Browse and search the real simdutf source file used in the code diff example.
Log Viewer
Filter and search 200,000 lazy generated log lines with virtualization.
Side-by-Side Code Diff
Synced side-by-side virtualized diff of two code versions with search and highlighted changes.
Search & Highlight
Data-layer search over virtualized content with the CSS Custom Highlight API (Ctrl+K).
Collapsible Tree
Hierarchical list where items can be expanded or collapsed while maintaining smooth performance.
Draggable List
Reorder virtualized items using native drag and drop while maintaining high performance.
Photo Gallery
High-performance grid photo gallery with loading placeholders for images as rows stream in.
Masonry Gallery
Remote images in a single masonry container: aspect-ratio oracle heights and bounded low-priority prefetch.