How to Create Infinite Scroll in JavaScript: Simple Guide

To create infinite scroll in JavaScript, listen for the scroll event on the window and check if the user has scrolled near the bottom. When close, load more content dynamically and append it to the page. This creates a seamless experience where new data loads as the user scrolls down.

Syntax

Use the window.addEventListener('scroll', callback) to detect scrolling. Inside the callback, check if the user is near the bottom by comparing window.innerHeight + window.scrollY with document.body.offsetHeight. If near, trigger a function to load more content.

Key parts:

• window.innerHeight: height of the visible window
• window.scrollY: vertical scroll position
• document.body.offsetHeight: total height of the page content

javascript

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
    // Load more content here
  }
});

Example

This example shows infinite scroll that loads 10 more items each time you scroll near the bottom. It appends new items to a list on the page.

javascript

const list = document.getElementById('list');
let itemCount = 0;

function loadMoreItems() {
  for (let i = 0; i < 10; i++) {
    itemCount++;
    const li = document.createElement('li');
    li.textContent = 'Item ' + itemCount;
    list.appendChild(li);
  }
}

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
    loadMoreItems();
  }
});

// Initial load
loadMoreItems();

Output

A webpage with a list that grows by 10 items each time you scroll near the bottom.

Common Pitfalls

Common mistakes include:

• Not throttling or debouncing the scroll event, causing too many calls and slowing the page.
• Loading content multiple times if the user stays near the bottom.
• Not checking if more content is available, leading to infinite loading.

Use a flag to prevent multiple loads and consider throttling the scroll event.

javascript

let loading = false;

window.addEventListener('scroll', () => {
  if (loading) return;
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
    loading = true;
    loadMoreItems();
    loading = false;
  }
});

Quick Reference

• Listen to scroll event on window.
• Check if near bottom using window.innerHeight + window.scrollY >= document.body.offsetHeight - threshold.
• Load and append new content dynamically.
• Use a flag to avoid multiple simultaneous loads.
• Consider throttling or debouncing for performance.

Key Takeaways

Detect scroll near bottom by comparing window height plus scroll position to page height.

Load and append new content dynamically to create infinite scroll effect.

Use a loading flag to prevent multiple simultaneous content loads.

Throttle or debounce scroll events to improve performance.

Always check if more content is available before loading.