How to implement infinite scroll pagination in JavaScript without libraries?

Introduction

In modern web applications like social media feeds, e-commerce product listings, and content platforms, infinite scroll has become a standard UX pattern. Instead of traditional pagination (page 1, 2, 3), content loads automatically as the user scrolls.

This improves user engagement, reduces friction, and creates a seamless browsing experience.

In this article, you will learn:

• What infinite scroll pagination is

• How it works internally in browsers

• Step-by-step implementation using pure JavaScript (no libraries)

• Real-world use cases and performance considerations

• Advantages and disadvantages

What is Infinite Scroll Pagination?

Infinite scroll is a technique where new data is automatically loaded and appended to the page when the user reaches near the bottom.

Real-Life Analogy

Think of Instagram or LinkedIn:

• You scroll down

• New posts keep loading automatically

There is no “next page” button—content flows continuously.

How Infinite Scroll Works Internally

The process involves three key steps:

1. Detect user scroll position

2. Check if user reached near bottom

3. Fetch and append new data

Step-by-Step Implementation

Step 1: Basic HTML Structure

<div id="content"></div>
<div id="loader">Loading...</div>

Step 2: CSS (Optional for UX)

#loader {
  text-align: center;
  padding: 20px;
}

Step 3: JavaScript Logic

let page = 1;
let loading = false;

async function loadData() {
    if (loading) return;
    loading = true;

    document.getElementById('loader').style.display = 'block';

    const response = await fetch(`https://api.example.com/data?page=${page}`);
    const data = await response.json();

    const container = document.getElementById('content');

    data.forEach(item => {
        const div = document.createElement('div');
        div.innerText = item.name;
        container.appendChild(div);
    });

    page++;
    loading = false;
    document.getElementById('loader').style.display = 'none';
}

Step 4: Detect Scroll Event

window.addEventListener('scroll', () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

    if (scrollTop + clientHeight >= scrollHeight - 100) {
        loadData();
    }
});

Step 5: Initial Load

loadData();

Real-World Use Case

Scenario: E-commerce Product Listing

• User scrolls products

• New items load automatically

• Improves user engagement and session time

Before vs After Infinite Scroll

Before:

• User clicks pagination buttons

• Slower browsing experience

After:

• Continuous content loading

• Better engagement and UX

Infinite Scroll vs Traditional Pagination

Performance Considerations

• Use throttling or debouncing

• Avoid too many DOM elements

• Implement lazy loading

• Use Intersection Observer for better performance

Common Mistakes

• Triggering multiple API calls

• Not handling loading state

• Ignoring end-of-data condition

Advantages of Infinite Scroll

• Better user engagement

• Seamless browsing experience

• Reduced interaction friction

Disadvantages

• Poor SEO indexing

• Hard to reach footer content

• Can cause performance issues

Best Practices

• Show loading indicators

• Add “Back to Top” button

• Combine with pagination for SEO pages

• Use Intersection Observer instead of scroll events

Summary

Infinite scroll pagination in JavaScript is a powerful technique to enhance user experience by loading content dynamically as users scroll. By implementing scroll detection, API fetching, and DOM updates efficiently, developers can create seamless and engaging interfaces. However, careful handling of performance, SEO, and user control is essential to ensure a scalable and production-ready implementation.