Understanding and Implementing Infinite Scroll with JavaScript-JS Tutorial-php.cn

Understanding and Implementing Infinite Scroll with JavaScript

王林

Release： 2024-07-23 12:35:31

Original

720 people have browsed it

Entendendo e Implementando o Scroll Infinito com JavaScript

What is Infinite Scroll?

You may have already seen sites like online stores where, when 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 reach 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 to understand 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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fox Images</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header">Fox Images</h1>
<div class="container"></div>
<script src="script.js"></script>
</body>
</html>

Copy after login

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;
}

Copy after login

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 < numImages) {
    const img = document.createElement('img');
    img.src = `${URL}${getRandomNumber()}.jpg`;
    container.appendChild(img);
    i++;
  }
}

loadImages();

Copy after login

Step 5: Add the Scroll Event

To implement the infinite scroll functionality, add this event listener:

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

Copy after login

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!

The above is the detailed content of Understanding and Implementing Infinite Scroll with JavaScript. For more information, please follow other related articles on the PHP Chinese website!