AHA demos
← All demos

Infinite scroll

Programming languages by year. Ten at a time. Scroll down and the next ten load by themselves.

#LanguageYearCreator
1Fortran1957John Backus
2Lisp1958John McCarthy
3COBOL1959Grace Hopper et al.
4ALGOL 601960Backus, Naur et al.
5BASIC1964Kemeny and Kurtz
6Simula1967Dahl and Nygaard
7Logo1967Papert, Feurzeig, Solomon
8Forth1970Charles Moore
9Pascal1970Niklaus Wirth
10C1972Dennis Ritchie
Loading more…

What to look at

The last row of each page is a sentinel: hx-trigger="intersect once" fires when it scrolls into view. It fetches the next page and hx-swap="outerHTML" replaces the sentinel with the new rows, which end in a new sentinel.

No scroll listener, no IntersectionObserver code, no "page" state in the browser. The server knows which page comes next because the sentinel carries it in its URL.

When the data runs out the server returns a plain row with no trigger. The chain stops on its own.

Source

Loading source…

Every file of this demo, as it runs. Or browse it on GitHub ↗