Home > Article > Web Front-end > Understanding and Implementing Infinite Scroll with JavaScript
Understanding and Implementing Infinite Scroll with JavaScript
- 王林Original
- 2024-07-23 12:35:31620browse
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>
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 < numImages) {
const img = document.createElement('img');
img.src = `${URL}${getRandomNumber()}.jpg`;
container.appendChild(img);
i++;
}
}
loadImages();
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();
}
});
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!