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.)
Top comments (0)