What is Infinite Scrolling ?
If you've ever visit upon this website : http://endless.horse/ you're likely familiar with the concept of infinite scroll.
Upon landing on the site, you're greeted with a horse. However, when you scroll down, you'll notice that the horse's leg keep getting longer and longer - and you never actually get to see the horse's feets.
Seems a bit silly, right?
Well, this is a great example of 'infinite scroll' - and you may be surprised to know that its a popular feature in software development!
Implementing Infinite Scroll - Step-by-Step Guide
We can see infinite scrolling in action on websites such as Twitter and Pinterest. There never seems to be shortage of posts as we scroll, Here is a simple way to implement it :
Step 1 :
Decide where you're going to add your infinite scroll feature. Is it a list of posts, a list of images?
You'll also need to decide where your data will be coming from. For this example, we are going to use images from a basic Random Fox API.
Step 2 - Setting Up the HTML Structure
Create your HTML file. Be sure to 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">
</head>
<body>
<h1 class="header">Fox Images</h1>
<div class="container">
<!-- Images of foxes will appear here-->
</div>
</body>
</html>
Step 3 - Setting Up the CSS
Create your CSS file. For this example, we'll keep our 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;
}
Writing the JavaScript
Step 4 :
Create your JavaScript file, select your container and grab the URL of the Random Fox API. Don't forget to link your JavaScript and CSS files to your HTML.
const container = document.querySelector('.container');
const URL = 'https://randomfox.ca/images';
Now, the way that this API works, is that we can insert a random number at the end of the URL to get a new fox image. Something like this : https://randomfox.ca/images/24.jpg
Step 5 :
So, let's make a function to load those images. We'll use a while loop and DOM methods such as createElement for this. We'll also need a function that will generate a random number.
function getRandomNumber() {
return Math.floor(Math.random() * 123) + 1; // Adjusted max number to fit the available images
}
function loadImages(numImages = 6) {
for (let i = 0; i < numImages; i++) {
const img = document.createElement('img');
img.src = `${URL}/${getRandomNumber()}.jpg`;
img.alt = 'Random Fox';
img.onerror = () => {
img.src = 'https://randomfox.ca/images/1.jpg'; // Default image in case of an error
};
container.appendChild(img);
}
}
loadImages();Step 6 :
Now, to implement our infinite scroll feature, we just need to add this event listener!
window.addEventListener('scroll', () => {
if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
loadImages();
}
});
Now, to implement our infinite scroll feature, we just need to add this event listener, We add an event listener to load more images as the user scrolls down the page.
If the sum of scrollY and innerHeight is greater than or equal to the scrollHeight, it means that we have reached the end of the document and thus we need to load more images.
→ window.scrollHeight : Indicates the height of the entire document
→ window.scrollY : Indicates how for the document has been scrolled from the top
→ window.innerHeight : indicates the visible part of the window
Example 👇
You can visit to https://clubofdevelopers.github.io/index to get the proper idea by this example.
0 Comments