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.
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.
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.
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>
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; }
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();
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.
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!