Virtual Scrollv2.2.0

Configurator / Code Generator

Select the features you need and generate complete typed Vue code: a component, a composable, or a CodePen.

Basics

The shape of the scrollable content.

DirectionItemsARIA roleKeyboard

ARIA label

Right-to-left (RTL)Own containerWindow / body

Renderer

List (VirtualScroll)Table (VirtualScrollTable)Masonry (VirtualScrollMasonry)

Data

lorem-api.com

What should the items contain?

Lorem API (fetched)Generated locally

Sentences / item

Items are filled from https://lorem-api.com/api/lorem in a single request; sentences are reused when more than 500 paragraphs are needed.

Sizing

How item and column sizes are known.

Item size modeSize (px)Gap (px)Buffer beforeBuffer after

Features

1 used

Each feature generates its own code; details appear when the feature is used.

Scrollbars

NativeVirtual (forced)Custom slotIndependent pair

Scroll snappingAutomatically align to items after scrolling stops.Sticky headerA header slot pinned to the top of the viewport.Sticky footerA footer slot pinned to the bottom of the viewport.Sticky sectionsiOS-style section headers using stickyIndices.Infinite loadingFetch more items when the end is near (load event + loading slot).Prepend restorationKeep scroll position when items are inserted at the top.Scroll position across visitsSave the first visible item when leaving and restore it on the next visit.Initial scroll positionJump to an item on mount.Scroll paddingReserve space at the start/end of the scrollable area.SSR pre-render rangeEmit an ssrRange so the server renders the first rows.

Single-file component using VirtualScroll - imports, typed data and configuration, template and styles included.

Highlighting…

Virtual Scrollv2.2.0
Welcome
Documentation
Configurator / Code Generator
Comparison
Changelog
LLM Support
Essentials
Features
Patterns

Theme