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.

Practice

1. What is the main purpose of virtual scrolling in Vue applications when displaying large lists?

easy

A. To sort the list items automatically

B. To render only visible items to improve performance

C. To disable scrolling for better user control

D. To load all items at once for faster access

Solution

1. Step 1: Understand virtual scrolling concept

   Virtual scrolling renders only the visible portion of a large list instead of all items at once.

2. Step 2: Identify the benefit in Vue apps

   This reduces rendering load and improves performance when dealing with many items.

3. Final Answer:

   To render only visible items to improve performance -> Option B

4. Quick Check:

   Virtual scrolling = Render visible items only [OK]

Hint: Virtual scrolling shows visible items only to boost speed [OK]

Common Mistakes:

• Thinking it loads all items at once
• Believing it disables scrolling
• Assuming it sorts items automatically

2. Which Vue template snippet correctly sets up a container for virtual scrolling with fixed height and overflow?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify container style for virtual scrolling

   The container must have a fixed height and vertical scrolling enabled (overflow-y: auto).

2. Step 2: Match the correct style snippet

   <div style="height: 300px; overflow-y: auto;"></div> sets height to 300px and overflow-y to auto, enabling vertical scroll inside fixed height.

3. Final Answer:

   <div style="height: 300px; overflow-y: auto;"></div> -> Option A

4. Quick Check:

   Fixed height + vertical scroll = <div style="height: 300px; overflow-y: auto;"></div> [OK]

Hint: Fixed height + overflow-y:auto enables virtual scroll container [OK]

Common Mistakes:

• Using overflow-x instead of overflow-y
• Setting height to auto instead of fixed
• Using position fixed incorrectly

3. Given this Vue code snippet for virtual scrolling, what will be rendered when scrollTop is 200, itemHeight is 50, and visibleCount is 10?

const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = startIndex + visibleCount;
const visibleItems = items.slice(startIndex, endIndex);

medium

A. Items from index 4 to 13

B. Items from index 0 to 4

C. Items from index 200 to 250

D. Items from index 50 to 100

Solution

1. Step 1: Calculate startIndex from scrollTop and itemHeight

   startIndex = floor(200 / 50) = 4.

2. Step 2: Determine endIndex using visibleCount (assume 10)

   endIndex = 4 + 10 = 14, so slice is items[4..13].

3. Final Answer:

   Items from index 4 to 13 -> Option A

4. Quick Check:

   startIndex = 4, endIndex = 14 slice = 4 to 13 [OK]

Hint: Divide scrollTop by itemHeight for start index [OK]

Common Mistakes:

• Using scrollTop directly as index
• Confusing endIndex with startIndex
• Ignoring floor function

4. Identify the bug in this Vue virtual scrolling code snippet:

const startIndex = Math.ceil(scrollTop / itemHeight);
const endIndex = startIndex + visibleCount;
const visibleItems = items.slice(startIndex, endIndex);

medium

A. Missing reactive state for scrollTop

B. Using slice instead of splice causes mutation

C. Incorrect calculation of endIndex

D. Using Math.ceil causes skipping the first visible item

Solution

1. Step 1: Analyze use of Math.ceil for startIndex

   Math.ceil rounds up, so if scrollTop/itemHeight is exactly 4, startIndex becomes 4, but if 3.1 it becomes 4, skipping some items.

2. Step 2: Understand impact on visible items

   This causes the first partially visible item to be skipped, leading to missing items during scroll.

3. Final Answer:

   Using Math.ceil causes skipping the first visible item -> Option D

4. Quick Check:

   Math.ceil skips partially visible items [OK]

Hint: Use Math.floor, not Math.ceil, for start index [OK]

Common Mistakes:

• Confusing slice with splice
• Ignoring reactive state importance
• Miscalculating endIndex

5. You want to implement virtual scrolling for a list of 10,000 items in Vue 3 using the Composition API. Which approach best ensures smooth scrolling and correct item rendering?

hard

A. Render all 10,000 items inside a scrollable div and rely on browser optimization

B. Use v-if to render only the first 100 items regardless of scroll position

C. Use a fixed height container with overflow-y:auto, calculate visible items on scroll, and absolutely position items inside a tall wrapper

D. Use a dynamic height container that grows as user scrolls down

Solution

1. Step 1: Understand virtual scrolling requirements

   Virtual scrolling needs a fixed height container with scroll enabled and dynamic rendering of visible items.

2. Step 2: Identify correct rendering technique

   Absolutely positioning items inside a tall wrapper simulates full list height while rendering only visible items improves performance.

3. Step 3: Evaluate other options

   Rendering all items or ignoring scroll position causes lag; dynamic height container breaks scroll behavior.

4. Final Answer:

   Use a fixed height container with overflow-y:auto, calculate visible items on scroll, and absolutely position items inside a tall wrapper -> Option C

5. Quick Check:

   Fixed container + dynamic visible items + absolute positioning = Use a fixed height container with overflow-y:auto, calculate visible items on scroll, and absolutely position items inside a tall wrapper [OK]

Hint: Fixed height + absolute positioning + scroll event = smooth virtual scroll [OK]

Common Mistakes:

• Rendering all items causing slow UI
• Ignoring scroll position for rendering
• Using dynamic height container breaking scroll