Simple Infinite Scroll with PURE Javascript (Free 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
Tutorial Video	The End

 

 

 

QUICKSTART

• If not using PHP, change endless.url in 2-iscroll.js section A to your own server-side script.
• Launch 1-iscroll.html in the browser. Captain Obvious – Use http:// not file://.

If you spot a bug, feel free to comment below. I try to answer short 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.

 

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.

 

 

 

STEP 1) CONTENT PAGE

<!-- (A) CONTENTS WRAPPER -->
<div id="page-content"></div>
 
<!-- (B) JUST SOME COSMETICS FOR DEMO -->
<style>
#page-content { background: lightblue; }
.page-demo { height: 1600px; }
</style>

That’s all, as straightforward as can be. We only need a <div id="page-content"> wrapper to load the contents into.

 

 

STEP 2) INFINITE SCROLL JAVASCRIPT

2A) FLAGS & SETTINGS

// (A) PROPERTIES
url : "3-dummy.php", // CHANGE THIS TO YOUR OWN!
first : true, // LOADING FIRST PAGE?
proceed : true, // OK TO LOAD MORE PAGES? "LOCK" TO PREVENT LOADING MULTIPLE PAGES
page : 0, // CURRENT PAGE
hasMore : true, // HAS MORE CONTENT TO LOAD?

A bunch of “control flags”… Will explain why these are useful below.

 

2B) INITIALIZE INFINITE SCROLL

// (B) INITIALIZE INFINITE SCROLL
init : () => {
  // (B1) LISTEN TO END OF PAGE SCROLL - LOAD MORE CONTENTS
  window.addEventListener("scroll", () => {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
      endless.load();
    }
  });
 
  // (B2) LOAD INITIAL PAGE
  endless.load();
}
window.addEventListener("DOMContentLoaded", endless.init);

init() loads on DOM content ready, and initializes the endless scroll.

• (B1) Attach a page scroll listener to the window, run endless.load() when the hits the bottom of the page.
• (B2) Run endless.load() itself to load the first page from the server.

 

2C) AJAX LOAD CONTENT

// (C) AJAX LOAD CONTENT
load : () => { if (endless.proceed && endless.hasMore) {
  // (C1) ENSURE ONLY 1 PAGE CAN LOAD AT ONCE
  endless.proceed = false;

  // (C2) PAGINATION & POST DATA
  var data = new FormData(),
      nextPg = endless.page + 1;
  data.append("page", nextPg);
  // APPEND MORE OF YOUR OWN DATA IF YOU WANT
  // data.append("KEY", "VALUE");
 
  // (C3) AJAX FETCH CONTENT
  fetch(endless.url, { method:"POST", body:data })
  .then(res=>res.text()).then((res) => {
    // (C3A) NO MORE CONTENT
    if (res == "END") { endless.hasMore = false; }

    // (C3B) APPEND CONTENT INTO HTML WRAPPER
    else {
      var el = document.createElement("div");
      el.innerHTML = res;
      document.getElementById("page-content").appendChild(el);
      endless.proceed = true; // UNLOCK
      endless.page = nextPg; // UPDATE CURRENT PAGE

      // (C3C) FIRST PAGE ONLY - MAKE SURE CONTENT COVERS WINDOW HEIGHT
      if (endless.first) {
        if (document.body.scrollHeight <= window.innerHeight) { endless.load(); }
        else { endless.first = false; }
      } else { endless.first = false; }
    }
  });
}}

Dumb trolls should be thinking “just fetch the contents, this is so complicated and stupid”. Feel free to do it your way, learn the hard way. All of the below have been contributed by people over time – You will run into the same problems, and implement all of these in one way or another.

• (C) Proceed with loading only when the flag is true – load : () => { if (endless.proceed && endless.hasMore).
• (C1) “Lock” the function once it starts – endless.proceed = false.
• (C3B) “Unlock” after the current fetch has ended – endless.proceed = true.

• To keep track of the number of pages loaded, we introduce endless.page and endless.hasMore.
• (C2) Calculate next page to load nextPg = endless.page + 1, send it to server – data.append("page", nextPg).
• (C3B) Update the current page on load – endless.page = nextPg.
• (C3A) The server should respond with END when there is no more content to serve – We set endless.hasMore = false to prevent load() from firing.

• (C3C) Basically, we detect the height of the content on the first loading cycle endless.first. Load until the content reaches the bottom of page.

 

 

STEP 3) SERVER-SIDE CONTENT

<?php
// (A) NO MORE CONTENT TO SERVE
if ($_POST["page"]==5) { echo "END"; }

// (B) SERVE DUMMY PAGE
else { echo "<div class='page-demo'>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 of:

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

 

 

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• Fetch API – CanIUse

Should not run into any compatibility issues with all modern browsers.

 

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 content… For example, “scroll down to read more” for an article. You will end up on the bad side of SEO practice.

 

TUTORIAL VIDEO