Implementing Infinite Scroll Pagination with JavaScript and a REST API

Infinite scroll pagination, inspired by sites like Facebook and Twitter, continuously loads more content as users scroll down. It ensures an uninterrupted flow of information and enhances the overall user experience. Businesses can use this feature in blockchain app development services for seamless content loading. In this article, learn how you can create this feature using JavaScript and a REST API.

Infinite Scroll Pagination

Infinite scroll pagination is a web development technique enabling users to scroll through an endless amount of content. It works by loading more content automatically as the user reaches the bottom of the page. This approach is commonly used on websites with extensive content, like social media platforms, news sites, and e-commerce platforms.

Infinite scroll pagination consists of two primary components: the JavaScript code responsible for managing scrolling and content loading, and the REST API that supplies the data for the content.

Infinite scroll pagination's JavaScript code typically monitors the scroll event on the window object. Upon reaching the page's bottom, the code sends a request to the REST API for additional content. The API responds with the next batch of content, which the JavaScript code appends to the page.

The REST API for infinite scroll pagination must be designed to facilitate pagination. It should accept query parameters enabling a client to specify the page number and the desired number of results per page.

Check It Out | A Comprehensive List of Top dApp Development Platforms

Implementing Infinite Scroll Pagination with JavaScript and a REST API

Here is an example of how to implement infinite scroll pagination with JavaScript and a REST API:

index.html

<!DOCTYPE html>

<html>

<head>

<title>Infinite Scroll Javsascript</title>

<body>

</head>

<h1>Infintie scroll using javascript</h1>

</div>

</div>

</body>

</html>

index.js

let currentPage = 1;

const limit = 3;

let total = 0;

const factsEl = document.querySelector(".facts");

const loading = document.querySelector(".loading");

const getfacts = async (page, limit) => {

const API_URL = `https://catfact.ninja/breeds?page=${page}&limit=${limit}`;

const response = await fetch(API_URL);

if (!response.ok) {

throw new Error(`An error occurred: ${response.status}`);

}

return await response.json();

};

const showBreed = (breeds) => {

breeds.forEach((breed) => {

const factEl = document.createElement("blockfact");

factEl.classList.add("breed");

factEl.innerHTML = `

${breed.breed}

factsEl.appendChild(factEl);

});

};

const hideloading = () => {

loading.classList.remove("show");

};

const showloading = () => {

loading.classList.add("show");

};

const hadMoreBreed = (page, limit, total) => {

const startIndex = (page - 1) * limit + 1;

return total === 0 || startIndex < total;

};

const loadBreeds = async (page, limit) => {

showloading();

try {

if (hadMoreBreed(page, limit, total)) {

const response = await getfacts(page, limit);

showBreed(response.data);

total = response.total;

}

} catch (error) {

console.log(error.message);

} finally {

hideloading();

}

};

window.addEventListener(

"scroll",

() => {

const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

if (

scrollTop + clientHeight >= scrollHeight - 5 &&

hadMoreBreed(currentPage, limit, total)

) {

currentPage++;

loadBreeds(currentPage, limit);

}

{

passive: true,

}

);

loadBreeds(currentPage, limit);

styles.css

body {

margin: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f0f0f0;

}

.grid-gallery {

display: grid;

grid-template-columns: repeat(3, 200px);

grid-gap: 20px;

}

.gallery-item {

position: relative;

overflow: hidden;

}

.gallery-item img {

width: 100%;

height: auto;

display: block;

border-radius: 10px;

}

.gallery-item .overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

opacity: 0;

transition: opacity 0.3s ease;

}

Upon executing this code, you will experience the implementation of an infinite scroll feature. As you scroll through the content, additional data will be dynamically loaded, seamlessly extending the page's content without the need for manual pagination. This creates a continuous and uninterrupted browsing experience for the user, allowing them to explore seemingly endless content effortlessly.

Suggested Post | Android App Development | A Beginner’s Guide

Advantages of Infinite Scroll Pagination

Seamless Browsing: Content loads dynamically as users scroll down, providing a smooth experience without page reloads or clicks.
Faster Consumption: Users can browse through content quickly, especially beneficial for those with slow internet connections.
Lower Server Load: Fetching smaller data sets incrementally reduces server strain compared to traditional pagination.
Improved Engagement: Continuous content flow keeps users exploring, increasing their interaction with your site.
Automatic Updates: New content is fetched and displayed automatically, keeping information fresh.
Simple Navigation: No need for users to navigate through multiple pages; scrolling is intuitive.
Mobile-Friendly: Well-suited for mobile devices, utilizing swipe or scroll gestures."‹"‹"‹"‹"‹"‹"‹"‹"‹"‹"‹"‹"‹"‹