Hey, welcome back in this lesson, we're going to look at the scroll event with the window object when
we scroll down, we want to load additional content.
So there's a few variables that we have to set up, as well as listening for the event of the scroll
on the window in order to pick up that that action from taking place.
And then we can load the content up accordingly.
So there's one thing that I did want to note.
So I am using append.
So this is very similar to pretty much the same thing as append child.
So with S6 we got introduced and we have the option to append and prepend.
So this is an option.
And if you find that maybe you're using an older browser or you might be having some issues with the
Pend, you can always update this to append child.
And I'll just do a quick update of it.
And when we reload it, it's going to do the same thing.
So it's just depending a node, whereas the Pend upends the entire element and it still puts it in the
same spot, which is inserts the node after the last element of the parent.
So this is going to be doing the same thing and there are some browser compatibility issues.
So append a child will work across all the different browsers and APPEND will only work with some of
the newer versions of Chrome, Firefox, Safari, Opera and Safari.
And it's not going to work on Internet Explorer or it doesn't have support for edX.
So keeping that in mind, I'll switch this back to append and let's get on with the lesson where we're
going to look at listing for the event.
So the scroll event.
So this is a window event object and using the window object.
So this is by default loaded.
Whenever you load content into the windows, every Web page will have a window object.
And we're going to listen for the on scroll event.
And this is an event that will be called whenever the window is scrolled.
And if the window is scrolled, we're going to set it to assign it to an anonymous function that's going
to just for now will console log out the Eevee value, which is the event value.
So whatever it's being scrolled and let me get back onto the console.
We can see if I clear it and if I scroll every time we're scrolling, we're registering this event.
So it's type as a scroll event.
And there's a bunch of information here as well.
The source element is the document.
So you can play sign on a particular element as well for the scroll.
But in this case, we want to scroll the entire page because we're listening for the entire page.
And whenever anyone is at the near the bottom of the page or at the bottom of the page, want to load
additional content.
So that's the way that we want the scroll or to work.
So we're going to also offset it by the height and within the window object itself.
There's a few values that are available for us.
So when we console log window, we can get the inner height.
So this is the number of pixels in the browser window viewport, including a friend on the horizontal
bar.
So this is that whole inner content that's available.
So when we load it and if I change the window height, you're going to see that that value is also changing
correspondingly.
So that's going to be an important one because we want to know how much space we have to work with and
now it's going to be one fifty one.
So it's way smaller.
So because this is all the space that we have within the window in our height, and that's the value
that we want to look at.
And we also want to compare that to where the scroll position.
So that's another value that's sitting within the window object and that's going to be determined by
where the scroll value of Y is going to be sitting.
So the scroll value of Y is a number of pixels that the document has already been scrolled vertically.
So let's give us an indication of how far we are scrolled already vertically.
So let's load that and we'll clear and load it again.
And this one is going to be scroll.
So we need to specify whether it's scroll Y or scroll X, and we can see now we're at five hundred and
ten.
When I scroll down, it's eight fifty two thousand seventy seven.
So it's going to give us an idea of where we are and combine this with the amount of inter height to
the scroll, how far we are.
We're going to know how far off the page we've already scrolled.
So looking at one more value that we need to look at in this equation is the document body.
And this is the element that we want to track.
And it's got a value of offset height.
So this is the height of an element relative to its element, parent, offset parent.
So we're going to take that value and of that as well.
So all of these values are going to be important.
And as you see, the further down I scroll, we can see that the inner height stays the same.
The scroll wheel.
I which is the window where it's how far it's scrawled on the page is there and then the other value
that we're looking at is the offset height.
So this is the height of this object and it includes how much we've scrolled down.
So taking these three numbers, we can come up with the formula to determine how close to the bottom
of the page the user is.
And this allows us to load the content.
So let's do that where we're going to load additional content and we do a condition for this and we're
going to take these values that we've got window height in her height.
We're going to add it to the window.
Scroll away.
And as you can see, this is going to produce the same number that we have or very similar to what we
have as the complete document body offset.
And we're going to check to see if this value so good.
Those will add those together first and we'll check to see if it's greater than or equal to.
And then this value here is going to be the document body offset.
So this is the element that we're looking at and where it's being positioned on the entire body.
And this value is going to return back and we need to subtract a little bit off of it.
And this is how many pixels off the bottom.
You want to do the scroll action on it.
So I'm going to do minus 300 and this is adjustable as needed.
And then if it's good, then we're going to do a console log and this is where we're going to do the
scrolling and that's where we're going to handle the scrolling action.
So let's see.
And we don't start at the bottom yet.
And you can see there by the scroll bar.
So it is very small there on the right hand side, the tiny scroll bar.
And now you see we've gotten to the bottom.
So we want to add the additional content whenever we're at the bottom.
And so this can be adjusted and you don't have to use the document body.
You can use the container that we've got as well.
So the page mean and we could track how far this is off the bottom.
So and I'll just duplicate that in the console.
And there's a number a lot of numbers, of course, that we can we can work with.
And that's again, was the document body.
So this is obviously the entire page element.
And see, there's a there is a difference, of course, between the values.
So this one might be a little bit more harder to calculate if we're doing the page mean, because then
we have to account for the heading there and adding that in and everything together so that one, by
default, it's going to be sitting it's already going to be sitting at slightly higher because it's
not accounting for the footer section, which was five hundred or four hundred and eighty six.
So it's not accounting for that.
So that's what we have to always consider and as well as padding and so on.
So there's a number of other additional variables.
So usually when I do this, I do stick with document body offset height.
But you are able to use any one of the elements that you want on the page.
And coming up next, though, we're going to hook up the rest of the requests, making the fetch requests
whenever we're ready to do additional scrolling.
So that's still to come, the upcoming lesson.
So set up your window on scroll event and launch the function whenever it's rolling with the condition.
And you're going to be ready to move on to the next lesson.