Javascript Scroll Tutorial Load Dynamic Content Into Page When User Reaches Bottom Ajax

Lesson Code:
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.


48 thoughts on “Javascript Scroll Tutorial Load Dynamic Content Into Page When User Reaches Bottom Ajax”

  1. 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.

  2. 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.

  3. 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?

  4. 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 🙂

  5. Just recently stumbled on your stuff… cant stop learning from it all… good stuff… have learned alot… more to go.  was curious which code editor u use.  I like the programed buttons on the left…

  6. If i copy-paste this code i would see the blue background content? It doesnt work to my pc. Is there something i miss? I dont use ajax call but i think i should see the new div when i scroll, like this tutorial. Can anyone help me?

Leave a Reply

Your email address will not be published. Required fields are marked *