| CARVIEW |
Select Language
HTTP/2 301
cache-status: "Netlify Edge"; fwd=miss
content-type: text/html
date: Sun, 28 Dec 2025 01:36:22 GMT
location: /examples/infinite-scroll/
server: Netlify
strict-transport-security: max-age=31536000
x-nf-request-id: 01KDH9JWFKPQPWXBARYTREJTEC
content-length: 98
HTTP/2 200
accept-ranges: bytes
age: 20506
cache-control: public,max-age=0,must-revalidate
cache-status: "Netlify Edge"; hit
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Sun, 28 Dec 2025 01:36:22 GMT
etag: "3e0c3b32bb2a30bcab791802634a4960-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01KDH9JWWJM7JXR41E75X6DK0G
content-length: 3601
</> htmx ~ Examples ~ Infinite Scroll
Infinite Scroll
The infinite scroll pattern provides a way to load content dynamically on user scrolling action.
Let’s focus on the final row (or the last element of your content):
<tr hx-get="/contacts/?page=2"
hx-trigger="revealed"
hx-swap="afterend">
<td>Agent Smith</td>
<td>void29@null.org</td>
<td>55F49448C0</td>
</tr>
This last element contains a listener which, when scrolled into view, will trigger a request. The result is then appended after it. The last element of the results will itself contain the listener to load the next page of results, and so on.
revealed- triggered when an element is scrolled into the viewport (also useful for lazy-loading). If you are usingoverflowin css likeoverflow-y: scrollyou should useintersect onceinstead ofrevealed.
Server Requests ↑ Show