Social Feed Demo
This example demonstrates infinite scrolling using the visible trigger. When the "load more" element comes into view, html★ automatically fetches the next page.
html★ Features Used
data-trigger="visible"— Fires when the element scrolls into viewdata-target="self"— Replace this element with the responsedata-swap="outer"— Replace the entire element (not just innerHTML)data-href="/api/posts?page=N"— Paginated endpoint
How It Works
The "load more" sentinel element uses data-trigger="visible" to detect when it enters the viewport. The response includes new posts plus a new sentinel for the next page, creating a seamless infinite scroll experience.
Key Concepts
- Intersection Observer — html★ uses native browser APIs for scroll detection
- Self-Replacing Pattern — The sentinel replaces itself with new content + next sentinel
- No JavaScript Loop — Each page response contains the trigger for the next
- Graceful End — When content ends, don't include a new sentinel