# akryum/vue-virtual-scroller

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/akryum-vue-virtual-scroller).**

10,615 stars · 974 forks · Vue

## Links

- GitHub: https://github.com/Akryum/vue-virtual-scroller
- Homepage: https://vue-virtual-scroller-demo.netlify.app
- awesome-repositories: https://awesome-repositories.com/repository/akryum-vue-virtual-scroller.md

## Topics

`scroller` `virtual-scroller` `vuejs` `vuejs-components` `vuejs2`

## Description

This library is a headless virtualization engine designed to optimize performance for large-scale list and grid rendering in Vue applications. By mounting only the elements currently visible within the viewport, it minimizes browser operations and memory usage, allowing interfaces to remain responsive even when handling massive datasets.

The engine distinguishes itself through a headless layout abstraction that decouples virtualization logic from specific markup, enabling the creation of custom interfaces without enforcing rigid container styles. It features automatic, dynamic size calculation to handle items with unknown or changing dimensions, ensuring accurate scroll positioning and fluid interaction for both vertical and horizontal layouts.

Beyond standard list rendering, the library supports complex interface requirements such as window-based scrolling, table column width synchronization, and live data stream management. It maintains stable viewport positions during real-time updates, making it suitable for dynamic content feeds and non-standard grid arrangements.

## Tags

### User Interface & Experience

- [Virtual Scrolling Utilities](https://awesome-repositories.com/f/user-interface-experience/virtual-scrolling-utilities.md) — Renders large datasets by mounting only visible elements to the DOM to maintain high performance.
- [High-Performance Rendering](https://awesome-repositories.com/f/user-interface-experience/high-performance-rendering.md) — Optimizes rendering performance for massive datasets by mounting only visible elements.
- [Viewport-Based Virtualization](https://awesome-repositories.com/f/user-interface-experience/viewport-based-virtualization.md) — Mounts and unmounts DOM nodes dynamically based on viewport intersection to minimize memory usage.
- [Headless Layout Virtualizers](https://awesome-repositories.com/f/user-interface-experience/layout-components/custom-layouts/headless-layout-virtualizers.md) — Provides custom layout virtualization using a headless engine that handles element visibility for non-standard structures. ([source](https://vue-virtual-scroller.netlify.app/guide/))
- [Dynamic](https://awesome-repositories.com/f/user-interface-experience/component-sizing-utilities/link-sizing/size-retrievers/dynamic.md) — Automatically updates dimensions when content size changes to ensure accurate scroll positioning. ([source](https://vue-virtual-scroller.netlify.app/demos/))
- [Horizontal Virtualization Engines](https://awesome-repositories.com/f/user-interface-experience/horizontal-layouts/horizontal-virtualization-engines.md) — Optimizes performance for side-scrolling lists and grids by measuring item widths instead of heights. ([source](https://vue-virtual-scroller.netlify.app/demos/))
- [Horizontal Virtualization Utilities](https://awesome-repositories.com/f/user-interface-experience/horizontal-scrolling-utilities/horizontal-virtualization-utilities.md) — Optimizes side-scrolling grids by virtualizing content based on item widths to maintain fluid performance.
- [Window-Based Virtualizers](https://awesome-repositories.com/f/user-interface-experience/viewport-based-virtualization/window-based-virtualizers.md) — Enables rendering content based on the main page scroll position rather than restricting scrollable areas to inner containers. ([source](https://vue-virtual-scroller.netlify.app/demos/))
- [Dynamic Size Calculators](https://awesome-repositories.com/f/user-interface-experience/measurement-tools/dynamic-size-calculators.md) — Provides automatic dimension calculation for items with unknown or changing sizes to ensure fluid scrolling.

### Web Development

- [Vue Performance Optimizers](https://awesome-repositories.com/f/web-development/performance-optimizations/performance-optimization-tools/vue-performance-optimizers.md) — Minimizes browser operations and memory usage when displaying massive lists or grids in Vue applications.
- [Dynamic Virtualization Engines](https://awesome-repositories.com/f/web-development/virtual-rendering-engines/dynamic-virtualization-engines.md) — Provides a headless rendering system that calculates element dimensions automatically to support variable-sized items.
- [Stream Viewport Managers](https://awesome-repositories.com/f/web-development/real-time-data-streaming/stream-viewport-managers.md) — Maintains stable viewport positions during real-time updates, ideal for chat logs or activity feeds.

### Software Engineering & Architecture

- [Large Dataset Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations.md) — Renders large datasets efficiently by mounting only visible elements in the viewport. ([source](https://cdn.jsdelivr.net/gh/Akryum/vue-virtual-scroller@master/README.md))
- [Headless Logic Decoupling](https://awesome-repositories.com/f/software-engineering-architecture/headless-logic-decoupling.md) — Decouples virtualization logic from specific markup to support arbitrary grid or list arrangements without enforcing styles.
- [Scroll Anchoring Mechanisms](https://awesome-repositories.com/f/software-engineering-architecture/reactive-update-scheduling/scroll-anchoring-mechanisms.md) — Maintains stable viewport positions during real-time data updates to prevent jarring layout shifts.

### Part of an Awesome List

- [Layout Components](https://awesome-repositories.com/f/awesome-lists/devtools/layout-components.md) — Efficient scrolling component for large lists.

### Data & Databases

- [Stream Viewport Positioners](https://awesome-repositories.com/f/data-databases/data-processing-pipelines/stream-processing-systems/data-streaming/stream-position-management/stream-viewport-positioners.md) — Manages live data streams by maintaining viewport positions or pinning views to the bottom when new items are added. ([source](https://vue-virtual-scroller.netlify.app/demos/))