Now I'm going to go back to Visual Studio Code and I'm gonna get rid of this current console log statement because we're gonna be adding three new features inside of this guide and I've also added the documentation right here and I'll include it in the show notes.

So in this guide we're gonna cover the innerHeight property, the scrollTop property and then the offsetHeight property. Now, these may be a little bit confusing or challenging to learn the very first time you see them so we're going to really walk through what every one of them represents and then hopefully by the end of it you'll see exactly how by combining all of them it is how we're gonna be able to build our infinite scrolling feature.

So let's get started with that, let me also save what we have right here just so I don't have any annoying console log statements coming up. Let's start by just working in the console and part of the reason why I'm wanting to do this is to show you that the code we're writing right now is pure vanilla JavaScript. You can use it in any application that's not tied to React, kind of like what we did with the scroll listener in the last guide.

So let's walk through the first property and we'll also walk through the summary as well. So we'll start off with the window height property right here and we have a definition inside of the documentation. It says that it is the height in pixels of the browser window viewport including if rendered, the horizontal scroll bar.

In summary, in just kind of Layman terms, that just means it's the size or it's the height of the browser window. So let's type that out and see what the value is. So I'm gonna say window.innerHeight and you can see right now my window is 179 pixels.

So now I'm going to shrink this just a little bit. So I'll shrink that value and let's just type it again. And now you can see when I shrunk the browser, it also shrunk this value of the inner height which makes sense.

So this is saying that however tall the browser is, so this is gonna be unique and dynamic based on the user's screen, their resolution, anything like that, so that's important to keep in mind. So I'm going to expand the browser back out and we're back to 176 pixels.

So that's the first value, it's finding out how tall the browser is. Now let's look at the second property, this scrollTop property, and this one can be a little bit more confusing if you've never used it before, so let's read the definition. It says the scroll top property gets or sets the number of pixels that an element's content is scrolled vertically.

And just as a little side note, this is a helpful property. Do you notice how it says, gets or sets? So if you ever have to build a feature where you want a user to be sent to a certain part of the screen, that you can actually dynamically set the scroll top property and send them to a different part of the screen and that can be helpful, I've had to build that into a number of applications.

So let's see what this looks like, in this case I'm not going to grab the windows property, instead I'm going to grab the document. So here, I'm gonna say document and remember, the document is the HTML document. So it's all of the content here and so I'm gonna say document and then document element and if you're curious on what that is, it is just the narrowed down HTML code that we have, so it is the pure HTML code that React generates for us.

So I'm gonna say documentElement. and then scrollTop and make sure you use a capital T right there, hit return and you can see it says zero.

So what the scrollTop does is it tells you in pixels how high or low the user has scrolled on the page. So now if I scroll down and let me just scroll down somewhere to the middle and if I rerun that code, you can see that now, it says the value's 533.

So what this represents is it means that we have traversed, we have scrolled down 533 pixels. And I'm gonna show you in kind of an animated way how to track that later on, but for right now, just know that that's what it represents. So now let's look at the third element, this offsetHeight.

So it says the offsetHeight is a read only property. So with scrollTop you can set it and read from it, with offsetHeight, this is simply a property that gives you some data, you wouldn't actually change this. So it's a read only property that returns the height of an element including the vertical padding and borders as an integer.

Okay, so what does that mean? I think it's easiest to actually see what the value is. So I'm gonna say document and same thing, documentElement.offsetHeight and it says 1630.

Okay, so what is this value represent? Well, if you go to a different page, this is one of the easiest ways to understand it. So I'm gonna go to the portfolio manager, make sure you let all the records scroll through. Now run the same code again. Now you can see because the portfolio manager's a much taller screen, this is 3208 pixels.

So what the offsetHeight is it's the total height of the entire document. So when the document loads, JavaScript and the browser really goes in and it sees exactly how tall the... not just the browser window is but also the entire document, see how far it goes down.

This is very important, because if you think of a infinite scroll feature, what we want to have happen and let's go look at the blog, because that's one of the easiest spots to visualize it. What I want to happen is for a user to be scrolling and as soon as they get to the very bottom of the document, I want to go and retrieve more posts.

That is what an infinite scroll feature is at the end of the day. So what we can do is we now have three very critical data points. We know how tall the browser window is, we also know at what point the user is scrolling, we know the top of it and then lastly, we know how tall the document is.

If we take each one of those points, what we can do is we can measure exactly where the user's at, how close they are to the bottom of the document, and then from there, we can trigger some actions. In our case, we're eventually gonna trigger the ability to retrieve more posts.

So let's now walk through kind of an animated version of what this looks like. So inside of our code, inside of the curly brackets, now what I wanna do is I just wanna call each one of those values and we're just gonna console log these for right now so that you can visually see which ones change and what the values are.

So the very first one if you remember is the window.innerHeight property, if I can spell it, and that is a capital H. The reason why I am putting all of that here is because I want you to be able to print it out and have a mapping for what those values are but that's just a string, just for our own debugging purposes.

Now I actually want to grab that value. So now that we have that, let's go grab the next one and that is document. and it's document, capital E, Element and then scrollTop with a capital T and so make sure you go and you replace the window.innerHeight, and lastly let's get the third property which is the offsetHeight. So this one that's offsetHeight and we want to grab that same value and print out what it is.

Okay, so just so you can see what's happening here. What we're gonna be able to do is the on scroll handler is gonna fire as soon as a user starts scrolling and it's going to print out each one of these values and the cool thing about this is the on scroll event fires every time a user scrolls so these values can be dynamic, so I'm gonna hit save and it got reformatted by prettier.

blog.js

activateInfiniteScroll() {
  window.onscroll = () => {
    console.log("window.innerHeight", window.innerHeight);
    console.log(
      "document.documentElement.scrollTop", 
      document.documentElement.scrollTop
    );
    console.log(
      "document.documentElement.offsetHeight", 
      document.documentElement.offsetHeight
    );
  };

}

Now let's come back here and make sure you give it a refresh just to make sure you're working with the latest version and now, I'm gonna go on the page and start scrolling a little bit and look at that, we have all of our values here.

Now you may notice only one of them is changing which makes sense. Our innerHeight is the browser window, that's not gonna change that is simply how tall I have the browser right now.

The offsetHeight is the total height of the document and then the scrollTop is everything that... it's the exact position of where the user is, so this is the one that's dynamic. So notice here, and this is where we're gonna get into a pretty much second grade math here, we're simply gonna add two numbers together.

Remember our goal and this is kinda I know we've spent a lot of time talking about the on scroll event listener and we've talked about each one of these elements, but it's all coming down to what we're gonna do right now. Remember that our goal is to know when the user has reached the bottom of the page.

Well, we can do that by adding the innerHeight right here with the scrollTop and that math makes sense because remember, the scrollTop is about right here, the scrollTop is the top of wherever the user has scrolled. If you add that to the innerHeight which is the browser window, you can see exactly how far the user has scrolled down.

And then we also have how the entire height of the document and watch this, this is pretty cool. If you type right here and your numbers are gonna be different obviously, because you'll be on a different monitor, but if you type 176 plus 1454 you have 1630 which is the exact height of the document. So what we can do is figure out exactly the moment when a user has reached the bottom of the page.

So now as our final work for this guide what I'm gonna do is add a conditional here. So this condition is gonna say, if the user has reached the bottom of the page, then I want you to trigger some action. So I'm going to eventually get rid of all those console log statements, but for right now I'm gonna keep 'em 'cause I'm gonna copy these values. So I'm gonna say, if the user's reached the bottom of the page, then I want you to perform an action.

For right now, I'm just going to console log and say get more posts and that's all I'm going to do.

if () {
  console.log("get more posts");
}

So inside of this conditional, what I want to say is if the window.innerHeight plus the document.documentElement.scrollTop. So if those two values are triple equals to document.documentElement.offsetHeight, then I want you to go get more posts.

We're gonna add some more logic into this the further we go. So for example, we wouldn't want to scroll all the way down and if there are no more posts we don't want to trigger that again. So we're gonna have some logic to see if anymore posts exist on the server and in the API.

So we're gonna have some more conditional logic, but for right now, we simply wanna say, if the user has reached the very bottom, go get some more posts. So let's come here, delete all these other console log statements, hit save and now let's go test this out.

blog.js

activateInfiniteScroll() {
  window.onscroll = () => {
    if (
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight
    ) {
      console.log("get more posts");
    }
  };
}

So I'm gonna go to the website and if you scroll all the way down to the bottom, let me clear out the debugging output. If you'll scroll all the way down to the very bottom, look at that, it says get more posts, so this is working perfectly.

We have combined a on scroll event listener with three attributes: the innerHeight, the scrollTop and then the offsetHeight, which gives us the full height of the document. And we've combined those so that we know exactly when the user has reached the bottom of the page and if I do it again, it gets triggered again, and again, and again. So, that's pretty cool. That gives us the ability to know exactly where the user's at on the page so that we can change the behavior of the entire application.

In the next guide, we're going to see how we can start connecting this to the API. How we can work with pagination and how we can then connect these two features, both grabbing the API and then also combining that with the infinite scroll element.

Resources

• Source code
• window.innerHeight Documentation
• document.documentElement.scrollTop Documentation
• document.documentElement.offsetHeight Documentation