What is Infinite Scroll?

You may have already seen sites like online stores where, as you scroll down the page, products appear continuously. Another example is endless.horse, it may seem simple but it is an excellent example to demonstrate the functionality of "Infinite Scrolls". When you access the website, you see a horse, but when you scroll down the page, you realize that the horse's legs continue to grow indefinitely, and you never get to the horse's feet.

Implementing Infinite Scroll

This functionality is widely used in modern development. We can see infinite scroll in action on major social networks, such as Twitter, Facebook and especially Instagram, where the content never seems to end as we scroll down the page.

In this article, I will demonstrate a basic implementation of this functionality. However, this approach does not address issues such as issues with long queries, caching implementation, and other solutions required for production applications. Still, this is a starting point for understanding how we can implement this feature.

Step 1: Decide where to add infinite scroll functionality

First, decide where you will add the infinite scroll functionality. Will it be a list of posts or images? You will also need to decide where the data will come from. For this example, we will use images from a basic API, the Random Fox API.

Step 2: Create your HTML file

Create the HTML file and include a container for your random fox images.

Fox Images

Step 3: Create your CSS file

For this example, we'll keep the stylesheet very simple.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

Step 4: Create your JavaScript file

Select the container and get the Random Fox API URL. Don't forget to link your JavaScript and CSS files in the HTML.

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i 




  
  
  Step 5: Add the Scroll Event


To implement infinite scroll functionality, add this event listener:


window.addEventListener('scroll', () => {
  if (window.scrollY   window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});




If the sum of scrollY and innerHeight is greater than or equal to scrollHeight, it means that we have reached the end of the document and therefore need to load more images.


  
  
  Conclusion


Your page should now be functional with the infinite scroll technique. Here's a challenge for you: try to redo this project using another API of your choice, also implement some more elaborate style to display your items. Good luck!