Virtual scrolling for large lists in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is virtual scrolling in the context of large lists?

Virtual scrolling is a technique that renders only the visible portion of a large list on the screen, improving performance by not rendering all items at once.

beginner

Why is virtual scrolling important for large lists in Vue applications?

Because rendering thousands of items at once can slow down the app and use a lot of memory, virtual scrolling helps by showing only what the user sees, making the app faster and smoother.

intermediate

Which Vue feature or library can help implement virtual scrolling easily?

Libraries like vue-virtual-scroller provide ready-made components to implement virtual scrolling with simple setup and good performance.

intermediate

How does virtual scrolling improve user experience on mobile devices?

It reduces lag and memory use by loading only visible items, so scrolling stays smooth even on devices with less power or memory.

advanced

What is a common challenge when implementing virtual scrolling?

Handling dynamic item heights can be tricky because the scroll position depends on item sizes; many solutions assume fixed heights or require extra logic to measure items.

What does virtual scrolling primarily help with?

A Sorting list items alphabetically

B Adding animations to list items

C Rendering only visible list items to improve performance

D Changing list item colors dynamically

Virtual scrolling focuses on rendering only the visible items to keep the app fast and responsive.

Which Vue library is commonly used for virtual scrolling?

A vue-virtual-scroller

B vue-i18n

C vuex

D vue-router

vue-virtual-scroller is designed to help with virtual scrolling in Vue apps.

What problem can occur if virtual scrolling assumes fixed item heights but items have different heights?

A Items will not render at all

B The app will crash immediately

C The list will sort incorrectly

D Scroll position may be inaccurate

Incorrect assumptions about item height can cause the scroll position to be off, leading to a poor user experience.

Virtual scrolling is especially useful when a list has:

A Only a few items

B Thousands of items

C No items

D Only images

Virtual scrolling shines when handling very large lists to keep performance smooth.

Which of these is NOT a benefit of virtual scrolling?

A Automatic data sorting

B Faster initial page load

C Reduced memory usage

D Smoother scrolling

Virtual scrolling does not sort data; it only optimizes rendering visible items.

Explain how virtual scrolling works in Vue and why it improves performance for large lists.

Think about how showing fewer items at once helps the app run faster.

Describe challenges you might face when implementing virtual scrolling with items of varying heights.

Consider how different item sizes affect scrolling calculations.

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