Simple Infinite Scroll In HTML JS (Using Intersection Observer)

Once upon a time, we had to do all sorts of crazy bounding box and window position calculations to implement infinite scroll. But today, we have something called “intersection observer”, and creating an infinite scroll with it is a breeze. Let Master Coffee walk you through an example – Let’s go!

CODE DOWNLOAD

ZIP File

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

VIDEO TUTORIAL

INFINITE SCROLL DEMO

Go ahead, scroll down the above demo and it will generate more rows of “hello world”. Take note, this demo will stop at 10 rows.

PART 1) THE HTML

1A) INFINITE SCROLL PAGE

iscroll.html

<!-- (PART A) CONTENT CONTAINER -->
<div id="content"></div>

<!-- (PART B) END -->
<div id="end"></div>

All we need for the HTML are 2 empty <div> containers.

<div id="content"> This is where we will load the content into.

<div id="end"> Marks the “end of the page”.

1B) DUMMY CONTENT

dummy.html

<div class="dummy">Hello World!</div>

For this example, we will load this dummy HTML snippet into <div id="content">.
In your project, this will be a server-side script that generates “the corresponding content” and does “pagination”.

P.S. Not going into the server-side script as it is different for everyone – Some simply load entries from the database, some load the user’s preferred content, some may need an algorithm to determine content, etc…

PART 2) THE JAVASCRIPT

iscroll.js

var iscroll = {
  // (PART A) PROPERTIES
  hContent : null, // html content container
  hEnd : null,     // html end container
  observer : null, // intersection observer

  // (PART B) INIT
  init : () => {
    iscroll.hContent = document.getElementById("content");
    iscroll.hEnd = document.getElementById("end");
    iscroll.observer = new IntersectionObserver(iscroll.load);
    iscroll.observer.observe(iscroll.hEnd);
  },

  // (PART C) AJAX FETCH CONTENT
  load : e => { if (e[0].isIntersecting) {
    iscroll.observer.unobserve(iscroll.hEnd);
    fetch("dummy.html")
    .then(res => res.text())
    .then(html => iscroll.hContent.insertAdjacentHTML("beforeend", html))
    .catch(e => console.error(e))
    .finally(() => iscroll.observer.observe(iscroll.hEnd));
  }}
};

// (PART D) START!
window.addEventListener("load", iscroll.init);

TLDR – Load more content into <div id="content"> when <div id="end"> is visible on the screen. For those who want a quick trace:

(D) On window load, we call an init() function.
(A & B) Get the HTML containers and start to observe <div id="end">.
(C) Call load() whenever <div id="end"> is visible on the screen.
- Detach the observer first, so we don’t accidentally load multiple pages when the current one is still loading.
- Fetch content from the server and append it into <div id="content">.
- Re-enable the observer when the current “load cycle” is complete.

THE END – INFINITE SCROLL IS NOT INFINITE!

That’s all for this short tutorial and sharing. But before we end, here’s a quick reminder to the newbies – All devices have something called “limited system resources”. So yes, while “infinite scroll” sounds cool, there has to be a limit to the amount of content loaded… Or you will risk crashing the device. Here’s a quick idea:

Add a page = 0 flag.
Increment the flag whenever a page is loaded – page++.
Only re-enable the observer when the limit is not reached – if (page <= 10) { observer.observe(END); }

Alternatively, you can also send a flag from the server:

On the server-side script, send END to indicate “no more content”.
In the Javascript, do not re-enable the observer on receiving this flag.