Infinite Scroll As A Design Pattern
Published: 2021-03-22 18:28:46

---
title: Infinite Scroll As A Design Pattern
published: true
description: Infinite scroll provides a better user experience than paginated search results. It keeps shoppers and readers engaged with what they've already demonstrated an interest in. It's not difficult to implement, here's how.
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi733gl87y03oy781coo.jpg
---

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:
	
```javascript
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:

```javascript
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](https://domcomponents.com/components/piqueme.blue?utm_term=InfiniteScrollAsADesignPattern) DOM component, which is ready-to-use via [NPM](https://www.npmjs.com/package/rwt-piqueme).
	
<hr>

(An expanded version of this article originally appeared on [Medium](https://medium.com/javascript-fanboi/2021-040-infinite-scroll-as-a-design-pattern-859ecc45287a).)