Virtual Scroll & Infinite Scroll
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
Timeline - 5000 Items
Table - 10000 Rows
# | Name | Status |
---|