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>AD79EGF555</td></tr>
<tr><td>Agent Smith</td><td>void11@null.org</td><td>9E2G9F3F53</td></tr>
<tr><td>Agent Smith</td><td>void12@null.org</td><td>9C05C7A88A</td></tr>
<tr><td>Agent Smith</td><td>void13@null.org</td><td>77...
Name | ID | |
---|---|---|
Agent Smith | void10@null.org | AD79EGF555 |
Agent Smith | void11@null.org | 9E2G9F3F53 |
Agent Smith | void12@null.org | 9C05C7A88A |
Agent Smith | void13@null.org | 77FA7E0755 |
Agent Smith | void14@null.org | 02D94D9G2C |
Agent Smith | void15@null.org | GBDFE3F717 |
Agent Smith | void16@null.org | 6G7EGG07F7 |
Agent Smith | void17@null.org | 1DE2C0817A |
Agent Smith | void18@null.org | CB61G9792F |
Agent Smith | void19@null.org | 9D37798073 |
Agent Smith | void20@null.org | DF3944A516 |
Agent Smith | void21@null.org | 10A5G6B109 |
Agent Smith | void22@null.org | 037A180ACD |
Agent Smith | void23@null.org | 8A5B83A455 |
Agent Smith | void24@null.org | 8487GF2A01 |
Agent Smith | void25@null.org | 67FD86F90F |
Agent Smith | void26@null.org | CEE88FA17F |
Agent Smith | void27@null.org | 98141DG1C4 |
Agent Smith | void28@null.org | 681546EA79 |
Agent Smith | void29@null.org | 3F38C0AE2A |