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 usingoverflow
in css likeoverflow-y: scroll
you should useintersect once
instead ofrevealed
.
<table hx-indicator=".htmx-indicator"><thead><tr><th>Name</th><th>Email</th><th>ID</th></tr></thead><tbody>
<tr><td>Agent Smith</td><td>void10@null.org</td><td>939FAG837B</td></tr>
<tr><td>Agent Smith</td><td>void11@null.org</td><td>90478E6806</td></tr>
<tr><td>Agent Smith</td><td>void12@null.org</td><td>29BBCFE824</td></tr>
<tr><td>Agent Smith</td><td>void13@null.org</td><td>D8...
Name | ID | |
---|---|---|
Agent Smith | void10@null.org | 939FAG837B |
Agent Smith | void11@null.org | 90478E6806 |
Agent Smith | void12@null.org | 29BBCFE824 |
Agent Smith | void13@null.org | D87G35908C |
Agent Smith | void14@null.org | F649A42426 |
Agent Smith | void15@null.org | E51D336E89 |
Agent Smith | void16@null.org | 473BB9E84D |
Agent Smith | void17@null.org | 3G817FDEG8 |
Agent Smith | void18@null.org | 36CCG899FB |
Agent Smith | void19@null.org | C1B8G3F8AE |
Agent Smith | void20@null.org | 58GC135B0D |
Agent Smith | void21@null.org | F4E3DFCF29 |
Agent Smith | void22@null.org | 570631C26B |
Agent Smith | void23@null.org | 41G204FE06 |
Agent Smith | void24@null.org | 4D6DG0G761 |
Agent Smith | void25@null.org | 6A061AEGF3 |
Agent Smith | void26@null.org | FC61FFBD4D |
Agent Smith | void27@null.org | 5C4361G440 |
Agent Smith | void28@null.org | 288GAC3A7C |
Agent Smith | void29@null.org | 27343B1060 |