Infinite Scroll As A Design Pattern

Software developers wanting to implement infinite scroll can easily get started with the browser's IntersectionObserver callback function.

As a working example, we could create a component for use on a blogging site which automatically fetches another article when the reader has reached the end of the original article.

Here's what the code looks like:

const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting == true) {
        fetchNextArticle();
    }
}, {threshold: 0});

const bottomOfPage = document.querySelect('#bottom-of-page');
observer.observe(bottomOfPage);

There isn't much to it. The bottom-of-page element could be any HTML element, but in its simplest form it is just a clear div, that has non-zero dimensions, situated somewhere after the original article's content.

The observer is called when the reader scrolls to a point where the target div becomes visible. A threshold value of 0 will trigger the callback when any part of the div is in the viewport. A threshold value of 1 will only trigger it when all of the div is in the viewport.

The fetchNextArticle function is where the just-in-time loading happens:

const articleUrls = [
    '/feb-28-2021.html',
    '/feb-21-2021.html',
    '/feb-14-2021.html',
    '/feb-07-2021.html'
];

const nextIndex = 0;

async fetchNextArticle() {  
    // fetch the article using HTTP
    const response = await fetch(articleUrls[nextIndex++]);
    if (response.status != 200 && response.status != 304)
        return;
    const templateText = await response.text();

    // get the <body> of the article's HTML
    const template = document.createElement('template');
    template.innerHTML = templateText;
    const body = template.content.querySelector('body');

    // create a new <article> and insert it
    const nextArticle = document.createElement('article')
    nextArticle.innerHTML = body.innerHTML; 
    bottomOfPage.parentNode.insertBefore(nextArticle, bottomOfPage);
}

In this example, there are four articles that are queued for just-in-time loading. Of course in practice, that queue should be dynamically built to match the reader's interests.

This bare-bones example is a good starting point, but savvy developers can easily imagine improvements:

Querying the next article's <title> and <meta> tags to extract open graph data, like featured image, dateline, byline, and lede paragraph.
Removing unnecessary headers, footers, menus and advertising links from the article's <body>.
Giving the reader a way to toggle between two views of the article: a collapsed UI card and an expanded full-text view.

All of this has been implemented in the rwt-piqueme DOM component, which is ready-to-use via NPM.

(An expanded version of this article originally appeared on Medium.)

Blog

Infinite Scroll As A Design Pattern

Joe Honton

Join Our Newsletter. No Spam, Only the good stuff.

Related