Virtual Scroll & Infinite Scroll

Two different approaches to handling large datasets efficiently

How It Works

Virtual Scroll (True Virtualization)

  • Constant DOM size - Only ~20 items in DOM regardless of total dataset
  • Performance - Can handle millions of items smoothly
  • Fixed heights - Requires items to have consistent, known heights
  • Use case - Tables, lists with uniform row heights
  • DOM strategy - Items added/removed dynamically as you scroll

Infinite Scroll (Lazy Loading)

  • Growing DOM - All loaded items stay in DOM
  • Performance - Good for hundreds/low thousands of items
  • Variable heights - Works with dynamic content heights
  • Use case - Feeds, timelines with rich content
  • DOM strategy - Items appended, never removed

Virtual Scroll Examples

True virtualization - constant DOM size

Timeline - 5000 Items

Only ~20 items in DOM at any time

    Visible range: 0-0 | DOM elements: 0

    Table - 10000 Rows

    Smooth scrolling through large datasets

    # Name Email Status

    Visible range: 0-0 | DOM rows: 0

    Infinite Scroll Example

    Lazy loading - items accumulate in DOM

    Timeline Feed - Infinite Scroll

    Load more on scroll (like social media feeds)

      Loaded items: 0 | Total DOM elements: 0

      Type to search or use /p for products, /o for orders, /u for users, /i for invoices

      Settings

      👤

      John Doe

      Administrator