Infinite Scroll
Fires a load event when the user nears the bottom of the content using an IntersectionObserver on a sentinel element, with optional loading and done states.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
threshold | number | 200 | Pixels of rootMargin slack before the sentinel triggers a load event |
disabled | boolean | — | Stop observing the sentinel when present |
loading | boolean | — | Show spinner and loading label, suppress further loads |
done | boolean | — | Show end message and stop firing load events |
height | string | — | Host scroll container height (px or CSS length) |
window | boolean | — | Observe the document viewport instead of the host container |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/infinite-scroll.js"></script>import "./pura/lib/infinite-scroll.js";