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.