Infinite Scroll Pagination With JavaScript and a REST API

Infinite scroll pagination is inspired by websites such as Facebook and Twitter. This is just pagination where as the user scrolls to the bottom of the page, more content is loaded. This improves the user experience on the website by making sure there is always more content on the page for users to read.

Doing Infinite Scroll Pagination Right

When infinite scroll pagination is implemented, there are a few really important points to remember.

Important links should not be at the bottom of the page. This is because every time the user tries to scroll down to find them, a new set of entries will load. All important links should be fixed on a sidebar or permanently kept on the top. 

2. Plan Ahead

It’s important that you plan where you want to include pagination and how you are going to process it. A common way of doing pagination is by listing the page numbers at the bottom of the page. When you use the infinite scroll method, however, no more page numbers will appear at the end of your article list, as they’re no longer needed. This pagination can be used on all themes as long as you don’t include loads of information in your footer section, as it may not give the desired effect.

In this tutorial, we are going to learn how to implement the infinite scroll feature in JavaScript.

The page will display a list of fun facts about cats, which will come from an API. The API returns 10 fun facts by default. When you scroll to the bottom of the page, the application will display an indicator to denote the loading state of the app. Meanwhile, the app will call the API to load the next set of fun facts. 

We are going to use this URL for loading fun facts. The API accepts a query string, page, which tells the API which page to load.

diagram of the infinite scroll pagediagram of the infinite scroll pagediagram of the infinite scroll page

Now, let’s get started with the application.

1. Create the Project Structure

First, create a folder with the following structure.

2. Build the HTML File

We are going to have several sections in our HTML file:

  1. a container, where the whole scrollable list of fun facts will be rendered
  2. a quotes section for every fun fact
  3. a loader, which will be visible when the fun facts are loading. The loader will be invisible by default.

3. Build the Script

Next, we need to create a script, which will connect with the div and load the fun facts. To achieve this, we will use the querySelector().

We also need a few control variables to define which set of items will be shown on the screen. The control variables in this snippet of code are:

  • currentPage: The current page is initialised to 1. When you scroll to the bottom of the page, the current page will be incremented by 1, and an API request will be made to get the contents of the next page. When the page is scrolled to the top, the current page will be decremented by 1. 
  • total: This variable stores the total number of quotes returned by the Fun Facts API.

4. Build the getFacts Function

The role of the getFacts function is to call the API and return the fun facts. The getFacts function accepts a single argument: page. It uses the Fetch API mentioned above to fetch data for the infinite scroll.

Fetch always returns a promise, so we are going to use the await-async syntax for receiving and processing the response. To get the json data, we will use the json() function. The getFacts function returns a promise, which will resolve and return the JSON. 

5. Build the showFacts Function

Now that we have received the fun facts, where can we display these facts? This is why we need to have a showFacts function.  The showFacts function works by iterating through the facts array. Then, it uses the template literal syntax to create an HTML representation of a fact object

A sample of the generated blockFact element is:

We make use of the appendChild function to add the <blockfact> element to the container. 

6. Show and Hide the Loading Indicator

As the user reaches the end of the page, a loading indicator has to be shown. For this, we are going to introduce two functions: one for loading, and the other for hiding the loader. We will use opacity: 1 to show the loader and opacity: 0 to hide the loader. Adding and removing opacity will show/hide the loader, respectively.

7. Check for More Fun Facts

To improve performance, we are going to introduce a function that can check if the API has more facts. The hasMoreFacts() function will return true if there are more items to fetch. If there are no more items to fetch, the API calls will stop.

8. Code the loadFacts Function

The loadFacts function is responsible for performing these important actions:

  • show or hide the loading indicator
  • call the getFacts function to fetch more facts
  • show the facts

In a sense, a drawback of this implementation is how fast it runs. You will not see the loading indicator most of the time because the API can return very quickly. If you want to see the loading indicator with every scroll, a setTimeout function can be used. Tweaking the delay of your setTimeout function will decide how long the loading indicator will be shown.

When the user scrolls to the bottom of the page, a scroll event handler is required to call the loadFacts function. The function will be called if the following conditions are met:

  • the scroll has reached the bottom of the page
  • there are more facts to be loaded

To achieve the scroll event, we will be making use of three window properties:

  • window.scrollHeight gives the entire document’s height.
  • window.scrollY gives an account of how far the document was scrolled by the user.
  • window.innerHeight gives the height of the window that is visible.

The diagram below gives a better overview of the above properties. Also, you will be able to understand that, if the sum of innerHeight and scrollY is equal to or greater than scrollHeight, the end of the document is reached, and this is when more fun facts have to be loaded.

diagram of how the page worksdiagram of how the page worksdiagram of how the page works

10. Initialise the Page

The last step in our infinite scroll would be to initialise the page. It is important to call loadFacts to load the very first set of fun facts.

Live Demo


Now, we have implemented a simple infinite scroll in JavaScript, which will fetch and render fun facts about cats whenever the user scrolls. This is just one of the most commonly used methods for infinite scrolling. 

Leave a comment

Your email address will not be published.