Virtual scrolling for large lists in Vue - Step-by-Step Execution

Concept Flow - Virtual scrolling for large lists

Start: Large list data

↓

Calculate visible window size

↓

Calculate start index based on scroll

↓

Render only visible items

↓

User scrolls

↓

Update start index

↓

Re-render visible items

↩Back to User scrolls

Virtual scrolling shows only the visible part of a large list, updating rendered items as the user scrolls.

Execution Sample

Vue

const visibleCount = 10;
const startIndex = ref(0);
const visibleItems = computed(() =>
  items.slice(startIndex.value, startIndex.value + visibleCount)
);

function onScroll(event) {
  startIndex.value = Math.floor(event.target.scrollTop / itemHeight);
}

This code calculates which items to show based on scroll position and renders only those items.

Execution Table

Step	ScrollTop (px)	startIndex	Visible Items Index Range	Rendered Items Count
1	0	0	0 - 9	10
2	50	1	1 - 10	10
3	150	3	3 - 12	10
4	450	9	9 - 18	10
5	950	19	19 - 28	10
6	995	19	19 - 28	10
7	1000	20	20 - 29	10
Exit	ScrollTop exceeds max scroll	-	-	Stop updating startIndex

💡 When scrollTop exceeds the maximum scroll height, no further updates to startIndex occur.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7	Final
scrollTop	0	0	50	150	450	950	995	1000	1000
startIndex	0	0	1	3	9	19	19	20	20
visibleItems range	0-9	0-9	1-10	3-12	9-18	19-28	19-28	20-29	20-29
renderedItems count	10	10	10	10	10	10	10	10	10

Key Moments - 3 Insights

Why do we only render a subset of items instead of the whole list?

Rendering all items slows down the app and uses too much memory. The execution_table shows we only render 10 items at a time, improving performance.

How is startIndex calculated from scrollTop?

startIndex is scrollTop divided by item height, rounded down. See execution_table rows where scrollTop 150 gives startIndex 3 (150/50=3).

What happens when scrollTop is near the bottom of the list?

startIndex stops increasing once the last items are visible, preventing out-of-range errors. The exit row shows no update beyond max scroll.

Visual Quiz - 3 Questions

Look at the execution_table at Step 3, what is the startIndex value?

A 3

B 9

C 1

D 0

💡 Hint

Check the 'startIndex' column in execution_table row for Step 3.

At which step does the visible items range first start at index 9?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Visible Items Index Range' column in execution_table.

If itemHeight doubled, how would startIndex change for scrollTop 150?

A startIndex would be 3

B startIndex would be 1

C startIndex would be 6

D startIndex would be 0

💡 Hint

startIndex = floor(scrollTop / itemHeight). Doubling itemHeight halves startIndex.

Concept Snapshot

Virtual scrolling shows only visible items of a large list.
Calculate startIndex = floor(scrollTop / itemHeight).
Render items from startIndex to startIndex + visibleCount.
Update startIndex on scroll to re-render visible items.
Improves performance by reducing DOM nodes.

Full Transcript

Virtual scrolling is a technique to efficiently display large lists by rendering only the items visible in the scroll window. The code calculates which items to show based on the scroll position and item height. As the user scrolls, the startIndex updates, and only the visible items are rendered. This reduces memory use and improves app speed. The execution table shows how scrollTop changes affect startIndex and which items are rendered. When scrolling near the bottom, updates stop to avoid errors. This method is common in Vue apps to handle big lists smoothly.