Why Virtual scrolling for large lists in Vue? - Purpose & Use Cases

The Big Idea

What if your app could handle thousands of items without freezing or lagging?

The Scenario

Imagine you have a list with thousands of items, like a long contact list or product catalog, and you try to render them all at once in your app.

The Problem

Rendering every item at once makes the app slow and clunky. The browser struggles to show so many elements, causing lag and freezing. Scrolling becomes jerky and frustrating.

The Solution

Virtual scrolling only renders the items visible on the screen plus a small buffer. As you scroll, it swaps items in and out smoothly, keeping the app fast and responsive.

Before vs After

✗ Before

for (let item of items) { render(item) }

✓ After

render(visibleItemsOnly) // update on scroll

What It Enables

You can smoothly display huge lists without slowing down your app or overwhelming the browser.

Real Life Example

Think of a social media feed that loads posts as you scroll, so you never wait for all posts to load at once.

Key Takeaways

Rendering all list items at once causes slow, laggy apps.

Virtual scrolling renders only visible items for smooth performance.

This technique makes large lists user-friendly and fast.

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