Virtual scrolling for large lists in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the visible output of this virtual scrolling component?

Consider a Vue 3 component using virtual scrolling to display a list of 1000 items. The viewport height shows only 10 items at a time. The component renders only visible items plus a small buffer.

Given the code below, what will be the number of <li> elements rendered in the DOM when the user scrolls to item 50?

Vue

import { ref, computed } from 'vue';

export default {
  setup() {
    const itemHeight = 30;
    const viewportHeight = 300;
    const totalItems = 1000;
    const scrollTop = ref(0);

    const visibleCount = Math.ceil(viewportHeight / itemHeight);
    const buffer = 3;

    const startIndex = computed(() => Math.floor(scrollTop.value / itemHeight));
    const endIndex = computed(() => Math.min(startIndex.value + visibleCount + buffer, totalItems));

    const visibleItems = computed(() => {
      const items = [];
      for (let i = startIndex.value; i < endIndex.value; i++) {
        items.push(i);
      }
      return items;
    });

    // Simulate scroll to item 50
    scrollTop.value = 50 * itemHeight;

    return { visibleItems };
  }
};

A 53 <li> elements rendered

B 10 <li> elements rendered

C 13 <li> elements rendered

D 50 <li> elements rendered

💡 Hint

Calculate visibleCount + buffer to find how many items are rendered.

The viewport shows 10 items (300 / 30). The buffer adds 3 more items for smooth scrolling. So total rendered items = 10 + 3 = 13.

📝 Syntax

intermediate

Which option correctly updates the scrollTop reactive value on scroll event?

In a Vue 3 virtual scrolling component, you want to update the scrollTop ref when the user scrolls the container. Which option correctly binds the scroll event and updates scrollTop?

Vue

<template>
  <div class="viewport" @scroll="onScroll" style="height: 300px; overflow-y: auto;">
    <!-- list items here -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
const scrollTop = ref(0);

function onScroll(event) {
  // update scrollTop here
}
</script>

A scrollTop = event.scrollTop;

B scrollTop.value = event.target.scrollTop;

C scrollTop.value = event.scrollTop;

D scrollTop = event.target.scrollTop;

💡 Hint

Remember to update the value of a ref using .value and access the scroll position from the event target.

In Vue 3, refs are updated by setting .value. The scroll position is on event.target.scrollTop.

🔧 Debug

advanced

Why does the virtual list flicker when scrolling fast?

A Vue 3 virtual scrolling list flickers or shows blank space when scrolling quickly. The component uses computed properties to calculate visible items but does not debounce scroll updates. What is the most likely cause?

A The scroll event updates too frequently causing rapid re-renders without throttling or debouncing.

B The itemHeight is set incorrectly causing wrong calculations.

C The buffer size is too large causing too many items to render.

D The component uses a v-for without a key attribute.

💡 Hint

Think about how scroll events fire rapidly and how that affects rendering.

Scroll events fire many times per second. Without throttling or debouncing, the component re-renders too often causing flicker.

🧠 Conceptual

advanced

What is the main advantage of virtual scrolling over normal scrolling for large lists?

Why do developers use virtual scrolling when displaying very large lists in web apps?

A It automatically paginates data from the server.

B It disables scrolling to prevent user interaction.

C It preloads all list items in memory for faster access.

D It renders only visible items, reducing DOM nodes and improving performance.

💡 Hint

Think about what happens when you render thousands of items in the DOM.

Virtual scrolling improves performance by rendering only the items visible in the viewport plus a small buffer, reducing memory and rendering load.

❓ state_output

expert

What is the final value of startIndex after these scrollTop updates?

Given the Vue 3 setup below, what is the value of startIndex.value after executing the scrollTop updates in order?

const itemHeight = 20;
const scrollTop = ref(0);
const startIndex = computed(() => Math.floor(scrollTop.value / itemHeight));

scrollTop.value = 45;
scrollTop.value = 39;
scrollTop.value = 60;

A 3

B 2

C 1

D 0

💡 Hint

Calculate floor of scrollTop divided by itemHeight after last update.

After last update, scrollTop.value = 60. 60 / 20 = 3, so startIndex.value = 3.

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