Infinite Scrolling with JavaScript

hi guys how are you mr. L I want to show you how I created this infinite scrolling effect so you can see here we have three tiles and when we scroll at the bottom after a couple of seconds we get multiple tiles appearing on the screen also we have this loading animation which appears in the meantime the loading animation already created a tutorial go check that out if you want I put the link in the description below and also instead of recreating this project I want to add the loading animation on a new project I created yesterday this blog post design so basically here we have also three tiles and when we scroll with the bottom I want the loading animation to appear and then after a while we make a request to the API and it will send back some information and we put it in the dock all right let me close this up okay and for this project because I don't want to work on top of this project we create a new one right let's see we don't need this thing all right also for the CSS we can remove a bunch of code here okay this is only needed for my 100 days one of the projects challenge okay and let's change this title to infinite scrolling okay something like that let me quickly go over the HTML and the CSS structure and also we have a little bit of JavaScript I remove these two because this from the other project okay and also let me zoom in so we can see better oops something like that all right so I have here the HTML structure so you can see we have a container and here the heading and this block it's basically our blog post cards looking like so we have a title some text and then the user informations an image and in the name span element and the CSS we have found redundant this one other project you have found the background color for the body the padding-bottom the bigger because we want to to show here the loading animation all right then the container it has a maximum that with let slip width okay yep the blog post has a background color white a little bit of pop shadow to make it pop up and then a little padding margin the tighter with more the margin change the color of the text also the user info it's flex elements we want everything to be centered here slide a little bit image and despair and that's pretty much it for for one tile and when it comes to JavaScript JavaScript JavaScript we are basically getting the container and we have let's see yep we have a get post function which basically calls an ape calls to a tea eyes so first it uses the JSON placeholder API to get the random post post title and this one basically post title and post text and I also wanted to have a random user for all the posts so I use the random user API here and yeah we have a good random number function here because well let me show you quickly so we go over to JSON placeholder here we can we can get list of to do to those and posts and comment stuff like that as you can see here we have 100 posts I didn't want it to take the entire array here so then I created a get random number function which basically returns a number between 1 and 100 and we take around the post from that API we store the data then we take a random user this API returns in random user every time we call it it has a bunch of bunch of information to gender main location also okay so we didn't have to do any trick to get random user here because it already gives us a random user [Music] and then we're using this data to create a new object which has the post and the user and using the add data to Dom to create to the the HTML structure I showed you here in the HTML so basically it's pretty much the same structure here let me comment it out but we just add in laid formation here yeah so that's pretty much it I didn't want it to go over all the HTML CSS because in this story we want to focus on implementing the infinite scrolling but if we want I can create another tutorial and I can show you how I created this from scratch alright so what we want to do now is to let me like this a little smaller right we want to add the scroll event listener on the window so let's do it here window that scroll oops add event listener scroll and we're doing something here to basically need to check for three properties first we have the document height so basically this part here from top to bottom and then we have the scrollable height so basically this entire thing from here to the top the entire scroll and then we also have the amount scrolled from the top so this here if you can see all right so basically what we need to check is to see again we have the document height and then we add the total amount scroll from the top and we check if that is bigger or equal to the total amount of scrollable height hope that make sense let me put that into code okay so all these properties are on the document document element vary from the HTML then we can take those out by saying Const scroll top scroll height and client height equals two so we take all this property from the HTML tournament this one is the amount scrolled from the top then scroll height is the total amount of Scrabble content and the client height is the the part lease we see here so this height let's console them to see scroll top scroll tight tight tight you okay I have another console up here we don't need this all right let's clear this again so let's see it better I'm going to put it as an object here okay so this is the just the fells away so we could see the property property name and value so in this case the entire quiet height is 283 pixels the entire scroll height is 1098 pixels and the amount we scroll from the top you see varies because we were scroll lake so when we land on the top its 0 so all we have to do is basically check if the client height plus the scroll top is equals to the height so let's do that if the client height + scroll top is bigger own equals then scroll height and if it is let's consult that log to the bottom we want to show that we make sure when it is the bottom and we want to load new content when it reached the bottom so yeah let's try that now so when we are at the bottom oops apparently doesn't work why is that so that's because you can see here we have instead of having 617 to make it wait around we have that 6 6 6 8 7 and stuff like that it's not around that so to fix that let's just add do not sit up 5 pixels something like that ok so let's try again I scroll the bottom let's see oops no no no sorry my bad it's that blasts - to the bottom again to the bottom perfect so now we reach the butter we have to do following things show loading animation okay but we don't have the loading elements yet so let's quickly head it I'm going to paste it from from the other project so we have the loading div with the three ball tips circle data or you want colleague okay and then we have the CSS so we have the loading which is by default hidden we took us to zero and we're going we showing it when we have the show class on it so let's see by default let me comment is out okay yes so they are not very visible let's make the background color darkish so like to do something key and they're there in left so let's enter them quickly left 50% and then translate I always mess this up turns or translate the X X is minus 50% boom they should be in the center now okay so you can see now when we read the button we can see them clearly and only like the car so let me change it to services have something like that okay better but we don't want them to be visible all the time so let's hide it first and only show it when we add that class so that's what we want to do here show the loading animation that's what fractions show loading and here in the function we're going to say loading style oops classlist head show what we don't have to loading yet so let's do it here comes loading document query selector loading okay so now this should work when we the bottom perfect so the circles start jumping on the screen with they're jumping all the time we just hide it okay the next thing here would be to load more data and then hide the loading animation so loading the data is easy because we already have the ghettos method so we just call this and when it finished then we can hide the loading animation so this is going to go inside the get posts here after we add it to the demo well let's do it here so loading classlist remove show oops all right so now this should work you scroll to the bottom whoops yeah so it loads very very fast you see so to make it more visible that said I got posted to set timeout maybe a second so get first something like that okay when we scroll down second boom new post okay can't see perfect yeah let's let's pretty much it we now have infinite scroll link you can use it in your projects but you don't want to load all the content beforehand you just want to allow the user to do something like scrolling or something like that and just afterwards load more content so yeah this is pretty much it for this tutorial I'm going to leave the link in the description if you liked this video make sure you give it a like and subscribe and share it with your friends also I have videos starting from the next video my audio should be much better because I just bought a new microphone so see you next time bye you

Channel: Florin Pop

Views: 20,344

Keywords: programming, javascript, css, coding, development, code, reactjs, web, frontend, animations

Id: L8X4zAsoxb4

Length: 16min 33sec (993 seconds)

Published: Wed Nov 20 2019