Virtual scrolling for large lists in Vue - Mini Project: Build & Apply

Virtual scrolling for large lists

📖 Scenario: You are building a Vue app that shows a very long list of items, like a contact list or product catalog. Showing all items at once can slow down the page. Virtual scrolling helps by only rendering the items visible on screen.

🎯 Goal: Create a Vue 3 component that uses virtual scrolling to efficiently display a large list of 1000 items. The component should only render the visible items based on scroll position.

📋 What You'll Learn

Create a list of 1000 items with unique names

Add a reactive variable for the height of each item

Calculate which items are visible based on scroll position

Render only the visible items inside a scrollable container

💡 Why This Matters

🌍 Real World

Virtual scrolling is used in apps that show very long lists, like contact lists, chat messages, or product catalogs. It helps keep the app fast and responsive.

💼 Career

Understanding virtual scrolling is important for frontend developers to build efficient user interfaces that handle large data sets without slowing down the browser.

1

Create the list of 1000 items

Create a Vue 3 component with <script setup>. Inside it, create a reactive variable called items that is an array of 1000 objects. Each object should have a name property with the value Item 1, Item 2, up to Item 1000.

Vue

// Create a reactive array called items with 1000 objects named 'Item 1' to 'Item 1000'
// Your code here



  

Hint

Use ref from Vue to create a reactive array. Use Array.from with length 1000 and map the index to create names.

2

Add item height and container height

Add two constants inside <script setup>: itemHeight set to 30 (pixels), and containerHeight set to 300 (pixels). These will define the height of each item and the visible container height.

Vue

import { ref } from 'vue'

const items = ref(Array.from({ length: 1000 }, (_, i) => ({ name: `Item ${i + 1}` })))

// Define itemHeight and containerHeight constants
// Your code here



  

Hint

Just add two constants with the exact names and values.

3

Calculate visible items based on scroll

Add a reactive variable scrollTop initialized to 0. Then create a computed property called visibleItems that calculates the start index as Math.floor(scrollTop / itemHeight) and the end index as start + Math.ceil(containerHeight / itemHeight). Return the slice of items.value from start to end.

Vue

import { ref, computed } from 'vue'

const items = ref(Array.from({ length: 1000 }, (_, i) => ({ name: `Item ${i + 1}` })))

const itemHeight = 30
const containerHeight = 300

// Add scrollTop ref and visibleItems computed property
// Your code here



  

Hint

Use ref for scrollTop and computed for visibleItems. Calculate start and end indexes carefully.

4

Render visible items in a scrollable container

In the template, create a <div> with style to set height: containerHeight + 'px', overflow-y: auto, and position: relative. Add a @scroll event handler that updates scrollTop.value with the event target's scrollTop. Inside this container, add another <div> with style setting height: items.length * itemHeight + 'px' and position: relative. Then use v-for on visibleItems to render each item in a <div> with style setting position: absolute, top: (index + Math.floor(scrollTop.value / itemHeight)) * itemHeight + 'px', height: itemHeight + 'px', and width: 100%. Display the item name inside each div.

Vue

import { ref, computed } from 'vue'

const items = ref(Array.from({ length: 1000 }, (_, i) => ({ name: `Item ${i + 1}` })))

const itemHeight = 30
const containerHeight = 300

const scrollTop = ref(0)

const visibleItems = computed(() => {
  const start = Math.floor(scrollTop.value / itemHeight)
  const end = start + Math.ceil(containerHeight / itemHeight)
  return items.value.slice(start, end)
})



  
  

Hint

Use a scrollable container div with fixed height and overflow-y auto. Update scrollTop on scroll. Render visible items absolutely positioned inside a tall inner div.

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