Demos

These demos show the main scrolling patterns supported by vue-virtual-scroller, from straightforward fixed-size lists to dynamic layouts and window-based scrolling.

Pick a demo

• RecycleScroller demo — start here for large lists with known, fixed item sizes.
• Function itemSize demo — derive variable row sizes with itemSize: (item, index) => number.
• DynamicScroller demo — see how unknown row heights are measured and updated over time.
• Virtual vs plain list demo — flip virtualization on and off on same fixed-height dataset.
• WindowScroller demo — follow page scrolling instead of rendering inside an inner scroll container.
• Disable transform demo — inspect disableTransform on a fixed grid and compare live wrapper styles.
• Chat stream demo — model a live feed that keeps the newest messages in view.
• Shift demo — prepend older rows while keeping the current viewport anchored.
• Simple list demo — compare fixed-size and measured rendering on the same dataset.
• Headless table demo — keep semantic table markup while using the headless API.
• Horizontal demo — virtualize a horizontal list with measured item widths.
• Grid demo — render large fixed-size card grids efficiently.
• Test chat demo — stress-test append-heavy timelines and bottom pinning.