1 00:00:00,060 --> 00:00:05,520 Hey, welcome back in this lesson, we're going to look at the scroll event with the window object when 2 00:00:05,520 --> 00:00:08,220 we scroll down, we want to load additional content. 3 00:00:08,250 --> 00:00:13,560 So there's a few variables that we have to set up, as well as listening for the event of the scroll 4 00:00:13,560 --> 00:00:17,790 on the window in order to pick up that that action from taking place. 5 00:00:17,790 --> 00:00:20,790 And then we can load the content up accordingly. 6 00:00:21,280 --> 00:00:22,980 So there's one thing that I did want to note. 7 00:00:23,190 --> 00:00:24,510 So I am using append. 8 00:00:25,020 --> 00:00:28,520 So this is very similar to pretty much the same thing as append child. 9 00:00:28,770 --> 00:00:33,930 So with S6 we got introduced and we have the option to append and prepend. 10 00:00:34,380 --> 00:00:35,490 So this is an option. 11 00:00:35,490 --> 00:00:40,950 And if you find that maybe you're using an older browser or you might be having some issues with the 12 00:00:40,950 --> 00:00:43,740 Pend, you can always update this to append child. 13 00:00:43,740 --> 00:00:45,420 And I'll just do a quick update of it. 14 00:00:45,600 --> 00:00:48,800 And when we reload it, it's going to do the same thing. 15 00:00:48,810 --> 00:00:54,750 So it's just depending a node, whereas the Pend upends the entire element and it still puts it in the 16 00:00:54,750 --> 00:00:59,400 same spot, which is inserts the node after the last element of the parent. 17 00:01:00,090 --> 00:01:04,830 So this is going to be doing the same thing and there are some browser compatibility issues. 18 00:01:05,100 --> 00:01:11,130 So append a child will work across all the different browsers and APPEND will only work with some of 19 00:01:11,130 --> 00:01:16,710 the newer versions of Chrome, Firefox, Safari, Opera and Safari. 20 00:01:16,980 --> 00:01:22,230 And it's not going to work on Internet Explorer or it doesn't have support for edX. 21 00:01:22,380 --> 00:01:28,440 So keeping that in mind, I'll switch this back to append and let's get on with the lesson where we're 22 00:01:28,440 --> 00:01:30,570 going to look at listing for the event. 23 00:01:30,570 --> 00:01:31,820 So the scroll event. 24 00:01:32,400 --> 00:01:37,620 So this is a window event object and using the window object. 25 00:01:37,630 --> 00:01:39,270 So this is by default loaded. 26 00:01:39,270 --> 00:01:43,950 Whenever you load content into the windows, every Web page will have a window object. 27 00:01:44,280 --> 00:01:47,520 And we're going to listen for the on scroll event. 28 00:01:47,820 --> 00:01:51,630 And this is an event that will be called whenever the window is scrolled. 29 00:01:51,930 --> 00:01:58,350 And if the window is scrolled, we're going to set it to assign it to an anonymous function that's going 30 00:01:58,350 --> 00:02:05,220 to just for now will console log out the Eevee value, which is the event value. 31 00:02:05,550 --> 00:02:09,540 So whatever it's being scrolled and let me get back onto the console. 32 00:02:10,140 --> 00:02:16,320 We can see if I clear it and if I scroll every time we're scrolling, we're registering this event. 33 00:02:16,590 --> 00:02:18,960 So it's type as a scroll event. 34 00:02:18,960 --> 00:02:21,840 And there's a bunch of information here as well. 35 00:02:22,020 --> 00:02:24,120 The source element is the document. 36 00:02:24,390 --> 00:02:28,110 So you can play sign on a particular element as well for the scroll. 37 00:02:28,350 --> 00:02:32,070 But in this case, we want to scroll the entire page because we're listening for the entire page. 38 00:02:32,220 --> 00:02:37,320 And whenever anyone is at the near the bottom of the page or at the bottom of the page, want to load 39 00:02:37,320 --> 00:02:38,240 additional content. 40 00:02:38,240 --> 00:02:40,890 So that's the way that we want the scroll or to work. 41 00:02:41,070 --> 00:02:45,810 So we're going to also offset it by the height and within the window object itself. 42 00:02:46,020 --> 00:02:48,290 There's a few values that are available for us. 43 00:02:48,290 --> 00:02:53,860 So when we console log window, we can get the inner height. 44 00:02:54,180 --> 00:03:01,200 So this is the number of pixels in the browser window viewport, including a friend on the horizontal 45 00:03:01,200 --> 00:03:01,520 bar. 46 00:03:02,490 --> 00:03:05,430 So this is that whole inner content that's available. 47 00:03:05,820 --> 00:03:12,870 So when we load it and if I change the window height, you're going to see that that value is also changing 48 00:03:12,870 --> 00:03:13,820 correspondingly. 49 00:03:14,100 --> 00:03:18,900 So that's going to be an important one because we want to know how much space we have to work with and 50 00:03:18,900 --> 00:03:20,280 now it's going to be one fifty one. 51 00:03:20,280 --> 00:03:21,290 So it's way smaller. 52 00:03:21,300 --> 00:03:26,250 So because this is all the space that we have within the window in our height, and that's the value 53 00:03:26,250 --> 00:03:27,360 that we want to look at. 54 00:03:27,510 --> 00:03:31,130 And we also want to compare that to where the scroll position. 55 00:03:31,350 --> 00:03:38,160 So that's another value that's sitting within the window object and that's going to be determined by 56 00:03:38,160 --> 00:03:41,870 where the scroll value of Y is going to be sitting. 57 00:03:42,090 --> 00:03:48,120 So the scroll value of Y is a number of pixels that the document has already been scrolled vertically. 58 00:03:48,240 --> 00:03:53,160 So let's give us an indication of how far we are scrolled already vertically. 59 00:03:53,580 --> 00:03:57,600 So let's load that and we'll clear and load it again. 60 00:03:58,710 --> 00:04:01,070 And this one is going to be scroll. 61 00:04:01,080 --> 00:04:07,350 So we need to specify whether it's scroll Y or scroll X, and we can see now we're at five hundred and 62 00:04:07,350 --> 00:04:07,770 ten. 63 00:04:07,920 --> 00:04:12,480 When I scroll down, it's eight fifty two thousand seventy seven. 64 00:04:12,780 --> 00:04:18,720 So it's going to give us an idea of where we are and combine this with the amount of inter height to 65 00:04:18,720 --> 00:04:21,000 the scroll, how far we are. 66 00:04:21,150 --> 00:04:24,780 We're going to know how far off the page we've already scrolled. 67 00:04:24,990 --> 00:04:32,100 So looking at one more value that we need to look at in this equation is the document body. 68 00:04:32,670 --> 00:04:34,830 And this is the element that we want to track. 69 00:04:35,130 --> 00:04:38,180 And it's got a value of offset height. 70 00:04:38,520 --> 00:04:43,840 So this is the height of an element relative to its element, parent, offset parent. 71 00:04:45,240 --> 00:04:49,060 So we're going to take that value and of that as well. 72 00:04:49,080 --> 00:04:51,060 So all of these values are going to be important. 73 00:04:51,240 --> 00:04:57,360 And as you see, the further down I scroll, we can see that the inner height stays the same. 74 00:04:57,840 --> 00:04:59,480 The scroll wheel. 75 00:04:59,560 --> 00:05:06,370 I which is the window where it's how far it's scrawled on the page is there and then the other value 76 00:05:06,370 --> 00:05:08,960 that we're looking at is the offset height. 77 00:05:09,160 --> 00:05:14,550 So this is the height of this object and it includes how much we've scrolled down. 78 00:05:14,890 --> 00:05:21,010 So taking these three numbers, we can come up with the formula to determine how close to the bottom 79 00:05:21,010 --> 00:05:22,900 of the page the user is. 80 00:05:23,090 --> 00:05:26,190 And this allows us to load the content. 81 00:05:26,620 --> 00:05:32,530 So let's do that where we're going to load additional content and we do a condition for this and we're 82 00:05:32,530 --> 00:05:37,510 going to take these values that we've got window height in her height. 83 00:05:37,600 --> 00:05:39,310 We're going to add it to the window. 84 00:05:39,760 --> 00:05:40,780 Scroll away. 85 00:05:41,110 --> 00:05:46,660 And as you can see, this is going to produce the same number that we have or very similar to what we 86 00:05:46,660 --> 00:05:50,400 have as the complete document body offset. 87 00:05:50,890 --> 00:05:54,910 And we're going to check to see if this value so good. 88 00:05:55,240 --> 00:06:01,350 Those will add those together first and we'll check to see if it's greater than or equal to. 89 00:06:01,600 --> 00:06:05,630 And then this value here is going to be the document body offset. 90 00:06:05,650 --> 00:06:10,810 So this is the element that we're looking at and where it's being positioned on the entire body. 91 00:06:11,440 --> 00:06:17,670 And this value is going to return back and we need to subtract a little bit off of it. 92 00:06:17,800 --> 00:06:20,260 And this is how many pixels off the bottom. 93 00:06:20,260 --> 00:06:22,270 You want to do the scroll action on it. 94 00:06:22,570 --> 00:06:26,280 So I'm going to do minus 300 and this is adjustable as needed. 95 00:06:26,470 --> 00:06:33,340 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 96 00:06:33,340 --> 00:06:36,370 scrolling and that's where we're going to handle the scrolling action. 97 00:06:36,820 --> 00:06:37,720 So let's see. 98 00:06:37,720 --> 00:06:40,540 And we don't start at the bottom yet. 99 00:06:40,550 --> 00:06:42,220 And you can see there by the scroll bar. 100 00:06:42,460 --> 00:06:46,510 So it is very small there on the right hand side, the tiny scroll bar. 101 00:06:46,630 --> 00:06:48,880 And now you see we've gotten to the bottom. 102 00:06:48,880 --> 00:06:52,230 So we want to add the additional content whenever we're at the bottom. 103 00:06:52,480 --> 00:06:56,800 And so this can be adjusted and you don't have to use the document body. 104 00:06:56,980 --> 00:07:00,280 You can use the container that we've got as well. 105 00:07:00,290 --> 00:07:04,810 So the page mean and we could track how far this is off the bottom. 106 00:07:05,290 --> 00:07:08,500 So and I'll just duplicate that in the console. 107 00:07:08,680 --> 00:07:12,400 And there's a number a lot of numbers, of course, that we can we can work with. 108 00:07:12,640 --> 00:07:14,970 And that's again, was the document body. 109 00:07:15,520 --> 00:07:18,190 So this is obviously the entire page element. 110 00:07:18,700 --> 00:07:21,880 And see, there's a there is a difference, of course, between the values. 111 00:07:22,480 --> 00:07:26,620 So this one might be a little bit more harder to calculate if we're doing the page mean, because then 112 00:07:26,620 --> 00:07:33,130 we have to account for the heading there and adding that in and everything together so that one, by 113 00:07:33,130 --> 00:07:39,790 default, it's going to be sitting it's already going to be sitting at slightly higher because it's 114 00:07:39,790 --> 00:07:45,910 not accounting for the footer section, which was five hundred or four hundred and eighty six. 115 00:07:46,090 --> 00:07:47,350 So it's not accounting for that. 116 00:07:47,360 --> 00:07:50,970 So that's what we have to always consider and as well as padding and so on. 117 00:07:51,190 --> 00:07:53,050 So there's a number of other additional variables. 118 00:07:53,860 --> 00:07:57,910 So usually when I do this, I do stick with document body offset height. 119 00:07:58,360 --> 00:08:01,420 But you are able to use any one of the elements that you want on the page. 120 00:08:01,660 --> 00:08:08,140 And coming up next, though, we're going to hook up the rest of the requests, making the fetch requests 121 00:08:08,260 --> 00:08:11,230 whenever we're ready to do additional scrolling. 122 00:08:11,230 --> 00:08:13,090 So that's still to come, the upcoming lesson. 123 00:08:13,360 --> 00:08:21,010 So set up your window on scroll event and launch the function whenever it's rolling with the condition. 124 00:08:21,250 --> 00:08:23,440 And you're going to be ready to move on to the next lesson.