javascript 64 lines · 10 steps

Infinite scroll with IntersectionObserver

A small class watches a sentinel element and fetches the next page whenever it scrolls into view.

Explained by highlit

Intermediate intersectionobserver pagination async dom guard-flags

1class InfiniteScroll {
constructor(sentinel, { loadMore, root = null, rootMargin = '200px' } = {}) {
  this.sentinel = sentinel;
  this.loadMore = loadMore;
  this.page = 1;
  this.loading = false;
  this.done = false;
8 
  this.observer = new IntersectionObserver(
    (entries) => this.handleIntersect(entries),
    { root, rootMargin, threshold: 0 }
  );
  this.observer.observe(this.sentinel);
}
15 
async handleIntersect(entries) {
  const entry = entries[0];
  if (!entry.isIntersecting || this.loading || this.done) return;
19 
  this.loading = true;
  this.sentinel.classList.add('loading');
22 
  try {
    const { items, hasMore } = await this.loadMore(this.page);
    if (items.length) this.page += 1;
    if (!hasMore) this.stop();
  } catch (err) {
    console.error('Failed to load more items', err);
  } finally {
    this.loading = false;
    this.sentinel.classList.remove('loading');
  }
}
34 
stop() {
  this.done = true;
  this.observer.unobserve(this.sentinel);
}
39 
disconnect() {
  this.observer.disconnect();
}
43}
44 
45const list = document.querySelector('#feed');
46const sentinel = document.querySelector('#sentinel');
47 
48new InfiniteScroll(sentinel, {
async loadMore(page) {
  const res = await fetch(`/api/posts?page=${page}`);
  const { posts, hasMore } = await res.json();
52 
  const fragment = document.createDocumentFragment();
  for (const post of posts) {
    const el = document.createElement('article');
    el.className = 'post';
    el.innerHTML = `<h2>${post.title}</h2><p>${post.excerpt}</p>`;
    fragment.append(el);
  }
  list.append(fragment);
61 
  return { items: posts, hasMore };
},
64});

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1IntersectionObserver turns scroll-position tracking into a cheap, callback-driven signal instead of a scroll listener.
2Guard flags like loading and done prevent overlapping fetches and stop work once the data runs out.
3A try/finally around the async fetch guarantees state and UI are reset even when a request fails.

Related explainers

rust

use std::sync::Arc;
use std::time::Duration;
 
use axum::{

Long-polling with Axum and Tokio Notify

long-polling concurrency shared-state

Advanced 8 steps

php

<?php
 
namespace App\Http\Controllers\Api;

Cursor pagination in a Laravel API

pagination cursor keyset

Intermediate 9 steps

javascript

import { useEffect, useRef } from "react";
import { useBlocker } from "react-router-dom";
 
export function useUnsavedChangesPrompt(isDirty, message = "You have unsaved changes. Leave anyway?") {

Guarding unsaved changes with a React hook

custom-hooks navigation-guard event-listeners

Intermediate 7 steps

typescript

type AsyncMethod = (...args: any[]) => Promise<any>;
 
function LogExecutionTime(thresholdMs = 0) {
  return function <T extends AsyncMethod>(

A method decorator that times async calls

decorators higher-order-functions async

Advanced 9 steps

javascript

function deepFreeze(obj) {
  const propNames = Reflect.ownKeys(obj);
 
  for (const name of propNames) {

Recursively freezing a nested object

recursion immutability object-freezing

Intermediate 6 steps

javascript

import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
const TextField = forwardRef(function TextField(
  { label, error, onChange, ...props },