Skip to main content

Effortless Content Loading: A Guide to Infinite Scroll with JavaScript and AJAX

· 5 min read
CSC EDUCATION

"Effortless Content Loading: A Guide to Infinite Scroll with JavaScript and AJAX"

Introduction​

Infinite scroll is a popular technique used to load content dynamically as users scroll down a webpage, providing a seamless and engaging browsing experience.

By fetching new data from the server as the user approaches the end of the page, you can create a continuous stream of content without requiring manual pagination.

In this article we'll learn how to implement infinite scroll using JavaScript and AJAX.

Suggested Tutorials 📑:​

Let's get started!

first we need to create a new file called index.html.

1. HTML Structure​

Set up the HTML structure for your content container and the initial content.


<!DOCTYPE html>
<html>
<head>
  <title>Infinite Scroll</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="content">
    <!-- Initial content goes here -->
  </div>
  <script src="script.js"></script>
</body>
</html>

2. JavaScript and AJAX​

Next, we'll create a JavaScript file called script.js and add the following code to it.


const contentContainer = document.getElementById('content');
let page = 1; // Initial page number

function fetchNewData() {
  // Simulate fetching data from the server (replace with your API endpoint)
  const url = `https://api.example.com/data?page=${page}`;

  fetch(url)
    .then(response => response.json())
    .then(data => {
      data.forEach(item => {
        const newItem = document.createElement('div');
        newItem.className = 'item';
        newItem.textContent = item.title;
        contentContainer.appendChild(newItem);
      });

      page++; // Increment the page number for the next request
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

function handleScroll() {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    fetchNewData();
  }
}

window.addEventListener('scroll', handleScroll);

Let's break down what's happening here.

First, we create a variable called contentContainer and assign it to the content container element in our HTML. This will be used to append new items to the page.

Next, we create a variable called page and set it to 1. This will be used to keep track of the current page number.

Then, we create a function called fetchNewData which will be used to fetch new data from the server. This function will be called when the user scrolls to the bottom of the page.

Inside the fetchNewData function, we create a variable called url and set it to the API endpoint we want to fetch data from. In this example, we're using a fake API endpoint that returns a list of items. You'll need to replace this with your own API endpoint.

Next, we use the fetch method to make a GET request to the API endpoint. We then use the json method to parse the response and return the data as JSON.

Once we have the data, we loop through each item and create a new div element for it. We then set the className and textContent properties of the new element and append it to the contentContainer element.

Finally, we increment the page variable by 1 so that the next request will fetch data from the next page.

Suggested Tutorials 📑:​

3. CSS Styling​

Now that we have the JavaScript and AJAX code in place, we can add some CSS to style the content container and items.


body {
  margin: 0;
  font-family: Arial, sans-serif;
}

#content {
  padding: 20px;
}

.item {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-weight: bold;
}

4. Loading Indicator​

Next, we'll add a loading indicator to let the user know that new data is being fetched.


function fetchNewData() {
  contentContainer.classList.add('loading');

  // Fetch data as before

  // Remove loading class after fetching
  contentContainer.classList.remove('loading');
}

Suggested Tutorials 📑:​

Conclusion​

Congratulations! 🙌 You've successfully implemented infinite scroll using JavaScript and AJAX. By fetching new data from the server as the user scrolls down, you've created a dynamic and engaging browsing experience. This technique is valuable for displaying large sets of data without overwhelming the user with excessive content all at once.

Happy coding! 😃