- Read Tutorial
- Watch Guide Video
This is something that I've never even seen in an early stage react development course. So I want you to know that, so if you find some of these topics to be difficult to learn do not worry, they definitely are on the more advanced side. With that being said, the reason why I wanted to put this feature in is one because its very fun to build.
Once you have built this, I think you're going to be very excited because you can populate this in future applications. This is a very common feature that you'll be asked to build. But also it gives us the ability to learn some key concepts. It'll help you with your understanding of JavaScript, and how to work with the browser.
So we're gonna take it very slowly, we're going to break down this feature into tiny pieces and we're also going to try to dissect it to understand the underlying concepts of how to make this work. We're not going to use an outside tool, or some type of library because you can do this with just pure vanilla JavaScript and that's what we're going to do here.
Now one note, what we're going to be doing is very specific with working with the browser in the window. As you may have noticed, I've zoomed in to a hundred percent the browser. So if you are following along and you have your browser zoomed out, so if you have it like I usually have it at 67 percent or anything less than a hundred. You're going to run into some bugs, you need this to be right at a hundred percent.
In order for this to work, and the reason for that is gonna become apparent here in a little bit. So the very first thing that we're going to do is, add what is called an on scroll handler. So we are going to bypass react in the sense, we're going to go around the virtual dom that's created and we're going to grab the entire browser and that's what we are going to be working with as we build this out, so let's see how we can do that.
You're going to open up visual studio code, and I'm going to start off by creating a function and this is gonna be the heart of our infinite scroll feature. So I'm gonna call it, activate infinite scroll. And let's just call this as a normal function and we're not gonna call it from the constructor or anything like that yet, we're gonna do that here in a little bit.
But first, let's see how to add the on scroll handler. We're going to use the window property, now the window property is available to you, just using Vanilla JavaScript inside of a web browser, and if you're curious on what the window is. I have the console open right here, and we can test it out.
If you type window, what you can see is this is actually giving us the true window. It's giving us the entire application, you're getting the font awesome config, you're getting the system, you're getting all kinds of things. This is pretty much the entire browser and everything inside of it. So you have a lot of data here, you have quite a few items that you may never even have to use. But it is good to know that you have it here.
So what we're going to do with the windows, we're going to walk through a few key properties that the window has, the first one is that we can watch for specific events. So throughout this course, we've added event listeners for clicks and you have the ability to do it for hover effects and all kinds of different events.
That's where the browser is listening, it's trying to see when a user is interacting in a specific way with the application and then it allows us to add an event, it allows to say okay I'm listening for one event and then I'm going to cause an action to happen.
So what we're wanting to start off with is to listen for the scroll event. So what I ideally want is when a user comes to the page and they start scrolling. That is the action we're looking for. So the way we can do that is by saying window.onscroll, and its all lower case.
Then what we do is we actually store a function inside of on scroll. So we're gonna take an anonymous function, so no arguments, and its just an arrow function, and inside of here we're saying whenever onscroll happens I want you to perform an action.
For right now let's just see what happens when we console log something. So I'm going to say onscroll and then we're not even gonna type anything out for right now. So let's just see if this works, and right now it's just a function, so we need to actually call it. So inside of the constructor say this.activateInfiniteScroll and then call it.
We don't have to bind it to this, later on, I'm going to show you how you can grab the data. But for now, we simply call it like a normal function. So hit save right here and then its refreshed. Now you don't have to do anything except scroll down a little bit and you can see right here in the console that this on scroll handler is working.
So that is all you need to do. And like I said we're gonna break down this guide and the next few guides into small chunks. So that's all we're doing in this guide is we're adding our onscroll handler and in the next few guides we're going to look at a few window and document properties and then your going to see how we can put those together in order to build our infinite scroll feature.