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.