Member-only story
Building an Infinite Scroll with Vanilla JavaScript
Let’s Build an Infinite Scroll Project Using Vanilla JavaScript
Introduction
The Infinite Scrolling is one of the exciting projects that you have to try in order to improve your JavaScript skills. Last month, I built a simple infinite scroll, It was one of the projects that I have tried in my 100 days of code challenge. So before trying this project, you will need to have knowledge of HTML, CSS, and JavaScript. As you can see, the project is so simple, it just loads and creates HTML elements when we scroll down. Let’s see how our project looks.
The Project Demo
As you can see in the example above, the project is very simple, It creates infinite elements when we scroll down. We have also added a simple loading animation as you see in the example.
Let’s Start with HTML
First, we will put 3 elements that contain the blog text(Lorem text) inside a container. We will also add the HTML elements for the loading animation. Let’s have a look at the example below:
Let’s Style Our Elements
So now, we will style our elements using CSS. You can read the code below to see our stylesheet.
The JavaScript Part
Now, this is the exciting part that will make our project functional. In our JavaScript logic, we created a scroll event that calls…
