In this blog we will learn about Implementing Pagination Using Infinite Scrolling. Now A Days The Website Contains Tons of Data Such As a list of product which has 1000's of products like in ecommerce web app. Getting All The Data At Once Doesn't Make Any sense out of it as the user doesn't see all of them at once From Here Pagination Has Born
Pagination
The Division of large document into clusters/pages to get the data using page number Here in From Our Fake API we pass query as page=0
Infinite Scroll
Infinite Scroll is the modern web pagination technique replacing the old NextPage to consume more content in next page.
The Use case Includes Most Social Media Platform and content Based Apps
Twitter
Instagram
Intersection Observer API
Intersection Observer API is a Web API in which it takes a targetNode to observe the intersection with respect to root element provided or with top document View Port
- Observer is used to observe the target element provided The IntersectionObserver() constructor is used to return new IntersectionObserver() Object
The IntersectionObserver takes two arguments
- callback function : gets triggered when target element intersection occurs with parent root provided or view port document
- options : It is a object consisting of three key value pairs
callback function
The callback function has two input arguments entries & observer.entries is an iterable object containing the target elements object details such as boundingClientRect,isVisible,isIntersecting etc..
options
The options is an object containing
- root : It is for checking the intersection of element with the view port and checking visibility Root must be parent of the target element
- rootMargin: to provide margin around the root
- threshold: it should be a number between 0-1 it indicates in percentage at what percentage should callback function be called when the target element is intersecting with root
const options = {
root: null,
rootMargin: "0px",
threshold: 0.5
};
const callback = (entries, observer) => {
entries.forEach((entry) => {
console.log(entries);
if (entry.isIntersecting && lastPageVisited > 0) {
getPassenger(lastPageVisited + 1);
}
});
};
const observer = new IntersectionObserver(callback, options);
observer.observe(targetNode);
Here the observer is the IntersectionObserver() object have observe method which takes the targetNode to observe with root;
The condition isIntersecting boolean indicates that if the target element is Intersecting with view port it becomes true i.e we reach bottom of the page and this triggers to fetch next user by incrementing the page number
root null indicates that the root view port is the window object
Implementation
Here i am using a fake api from online is https://api.instantwebtools.net/v1/passenger
Create a code sandbox or any editor of your wish and select vanilla javascript app you can also do with react in this blog i have done using vanilla js
index.html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<script src="src/index.js"></script>
</head>
<body>
<div id="app">
<div id="user-container"></div>
<div id="bottom-paginator"></div>
</div>
</body>
</html>
index .js
const getPassenger = (page = lastPageVisited) => {
console.log(lastPageVisited);
fetch(`https://api.instantwebtools.net/v1/passenger?page=${page}&size=50`, {
method: "GET"
})
.then((res) => res.json())
.then((res) => {
lastPageVisited++;
const passengers = res.data;
passengers.forEach((passenger) => {
const div = document.createElement("div");
div.innerHTML = passenger.name;
app.appendChild(div);
});
});
};
getPassenger();