Pagination With Infinite Scrolling

Pagination With Infinite Scrolling

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. old-pagination The Use case Includes Most Social Media Platform and content Based Apps

  • Twitter

  • Instagram

chaliye-shuru-karte-hai

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();

Code SandBox

Code SandBox Link Here