Simple Infinite Scroll with Javascript – Free Code Download

Welcome to a tutorial on how to create an infinite page scroll with vanilla Javascript. If you have been following up with social media – Facebook, Twitter, Instagram, etc… Then you should not be a stranger to that “scroll down to load more contents” interface. Yep, that is exactly what we will walk through in this guide – An example of infinite scroll using only pure Javascript. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

Download & Notes	Infinite Scroll	Useful Bits
The End

 

 

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICKSTART

For you guys who just want to use this as a “plugin”:

1. Change endless.url in 2-scroll.js to your own server-side script.
2. In your HTML page – Create a <div id="page-content"> and <div id="page-loading">. Also, load 2-scroll.js.
3. The Javascript will POST a page number to your server-side script, use it to load whatever content, and output it. If there is nothing left to load, just output END.
4. Captain Obvious – Use http:// not file://.

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

 

STEP 1) CONTENT PAGE

THE HTML

<!-- (A) CONTENTS -->
<div id="page-content"></div>
 
<!-- (B) NOW LOADING -->
<div id="page-loading">Now loading...</div>

This HTML should be very straightforward.

• <div id="page-content"> is where the contents will be loaded via AJAX.
• <div id="page-loading"> is a simple “now loading” message that will show whenever the content is being fetched from the server. Feel free to use your own AJAX spinner image if you want.

 

THE CSS

#page-content, #page-loading { 
  padding: 10px;
  background: #dffcd1;
}
#page-loading { display: none; }
html, body { font-family: arial, sans-serif; }

Just a bunch of simple cosmetics. The only functional part here is hiding the “now loading” by default – #page-loading { display: none; }.

 

 

STEP 2) INFINITE SCROLL MECHANICS

THE JAVASCRIPT

var endless = {
  // (A) PROPERTIES
  // (A1) SETTINGS
  url: "3-contents.php", // URL to load content from
  // (A2) FLAGS
  page: 0, // current page
  hasMore: true, // has more contents to load?
  proceed: true, // safe to load more? another page currently loading?
  first: true, // is this the first loading cycle?
  // (A3) HTML ELEMENTS
  eLoad: null, // now loading
  eContent: null, // where to load contents into
 
  // (B) INIT
  init: function () {
    // (B1) GET HTML ELEMENTS
    endless.eLoad = document.getElementById("page-loading");
    endless.eContent = document.getElementById("page-content");
 
    // (B2) ATTACH SCROLL LISTENER
    // CREDITS: https://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom
    window.addEventListener("scroll", function(){
      if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        endless.load();
      }
    });
 
    // (B3) LOAD CONTENTS
    endless.load();
  },
 
  // (C) AJAX LOAD CONTENTS
  load: function () { if (endless.proceed && endless.hasMore) {
      // (C1) BLOCK MORE LOADING UNTIL THIS LOAD CYCLE IS DONE
      endless.proceed = false;

      // (C2) SHOW NOW LOADING
      endless.eLoad.style.display = "block";
 
      // (C3) DATA
      var data = new FormData(),
      nextPg = endless.page + 1;
      data.append('page', nextPg);
 
      // (C4) AJAX
      var xhr = new XMLHttpRequest();
      xhr.open("POST", endless.url);
      xhr.onload = function () {
        // NO MORE CONTENTS TO LOAD
        if (this.response == "END") {
          endless.eLoad.innerHTML = "END";
          endless.hasMore = false;
        }

        // PUT CONTENTS INTO HTML
        else {
          var el = document.createElement('div');
          el.innerHTML = this.response;
          endless.eContent.appendChild(el);
          endless.eLoad.style.display = "none";
          endless.page = nextPg;
          endless.proceed = true;

          // (C5) ON INIT ONLY
          // LOAD MORE IF CONTENTS DID NOT HIT THE END OF WINDOW
          if (endless.first && endless.hasMore) {
            if (document.body.scrollHeight <= window.innerHeight) { endless.load(); }
            else { endless.first = false; }
          } else { endless.first = false; }
        }
      };
      xhr.send(data);
    }
  },
};
window.addEventListener("DOMContentLoaded", endless.init);

 

 

THE EXPLANATION

Not going to explain line-by-line, but essentially:

• A – A bunch of settings and flags.
• B – Initialize the endless scroll on page load.
  • Fetch <div id="page-content"> and <div id="page-load">.
  • Attach a page scroll listener, run endless.load() if the page hits the bottom.
  • Run endless.load() to load the first page from the server.
• C – Load content from the server via AJAX, and append it into <div id="page-content">.

 

STEP 3) SERVER-SIDE CONTENT

<?php
if ($_POST['page']==5) {
  echo "END"; // ECHO END IF NO MORE CONTENTS TO LOAD
} else {
  echo "<div style='height:800px;'>PAGE ".$_POST['page']."</div>";
}

Lastly, this is just a dummy server-side script – Output whatever content you are working on, with whatever language you are using. Things to take note:

• The Javascript will POST a page over, use this to do pagination as required.
• Output END if there is nothing left to show.

 

 

 

INFINITE SCROLLING – REALLY?

Technically, we can load and serve an infinite amount of content this way. But you have to consider that computers still have finite memory and system resources… Plus, do you really have that much content to serve? So even though this is called “infinite scroll”, there still has to be a limit in order to prevent browser crashes.

 

NOTE – BAD FOR SEO

Also, a piece of bad news for you SEO lovers. Even though some search engines are smart enough to understand AJAX calls, they may not “scroll down” to load more contents; Infinite scrolling is only good for certain types of content, and please do not use it to “hide” your useful contents… For example, “scroll down to read more” for an article. You will end up on the bad side of SEO practice.