Lesson Code: http://www.developphp.com/video/JavaScript/Scroll-Load-Dynamic-Content-When-User-Reach-Bottom-Ajax
Learn to make dynamic page content appear only when user scrolls down to the bottom of your page content using Javascript. We are using the onscroll event for the window object and several DOM properties to create the functionality. *object.offsetHeight – *window.pageYOffset – *window.innerHeight. It serves as a smart way for dynamic websites to load only the data required to fill the window, then load more as the user scrolls down the page.
You can see this effect if you have a Facebook account and you scroll down your timeline. Facebook executes new Ajax requests each time you scroll to the bottom of the page content, to load in more data to the page magically with Ajax. This way they do not have to load a lot of data to the page initially, and only spend dynamic data loading energy if the user scrolls down the page to see more and more data. Other large scale dynamic websites also use this approach to achieve efficient database data rendering in a smart modern way.
Original source
29 responses to “Javascript Scroll Tutorial Load Dynamic Content Into Page When User Reaches Bottom Ajax”
An interesting approach would be to fire another event when the user scrolls (back) to the TOP of the page and reload that old part dynamically. It would prevent blowing up your wrap div by endless scrolling.
dosn't work… 🙁
thanks bro
simple and fantastic
very nice tutorial, Exactly the same I was looking for!
what if the content isnt blue box? I actually have more data to show, but when the page just loaded i only want to show the first 10 items, as you scroll down you can see all 50 items.
assuming I am suppose to be loading events or post, how do i get to update the various comments for each of the events in A REAL-TIME situation
10:20 .lol
İt would be great that some ajax rq done and append data as 4 items per request in this tutto 🙁
Thanks dude, the tutorial was great but how to load different content each time like lazyload images when users hit the bottom? the ajax cannot be the same all the time, is there anything need to be down on the server side?
Brilliant explanation!
I want to like this videos but i don't like the guy lol
Thank you
very useful tutorial.. thanks
Dude, your voices in the tutorials are epic! They help me to not doze off.
Thanks for this Let me subscribe.
Thanks for this! Using it with jQuery, used scrollHeight instead of offsetHeight to get the right behaviour.
Thanks
Can you make a tutorial on how to burp??
can you tell me how to make (Tricky Button Moving Away when Mouseover)
thanks
If someone knows, pleas explain the "ajax call to get more dynamic data goes here" part. I am struggling with it for more than a week… Or, even better, if someone can put a finished source of this tutorial video. Thanks 🙂
can you please tell me how to make this script stop loading once my data is all loaded? it kept loading empty space i don't know how to stop it 🙁
thanks 🙂
im still so lost on this one.
Just what i needed for my project thx
Adam, awesome tutorial. Very well done. Although I am a ASP.NET developer this will work for me. Great friendly, kind and (I want to help my fellow developer) tone. You did a great job. Thumbs up.
Lol am I the only one that got caught off guard with that burp. I died laughing
Can you please give us the load more HTML page data onto the bottom code? I've been stuck for a few days on that part.
Thanks for adam and others
I need function to stop run timeline if ended data from database