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>DG9E28E8AE</td></tr>
<tr><td>Agent Smith</td><td>void11@null.org</td><td>BF01GACFEC</td></tr>
<tr><td>Agent Smith</td><td>void12@null.org</td><td>8A3C946D78</td></tr>
<tr><td>Agent Smith</td><td>void13@null.org</td><td>F1...
Name | ID | |
---|---|---|
Agent Smith | void10@null.org | DG9E28E8AE |
Agent Smith | void11@null.org | BF01GACFEC |
Agent Smith | void12@null.org | 8A3C946D78 |
Agent Smith | void13@null.org | F18GA8C894 |
Agent Smith | void14@null.org | A1D65BDCD9 |
Agent Smith | void15@null.org | 5B2FB31E62 |
Agent Smith | void16@null.org | 7GE6E1673B |
Agent Smith | void17@null.org | 95C9A7GAGF |
Agent Smith | void18@null.org | 1AED5CE9A7 |
Agent Smith | void19@null.org | G25D3FAFF7 |
Agent Smith | void20@null.org | 515B052571 |
Agent Smith | void21@null.org | 3C6A7373F2 |
Agent Smith | void22@null.org | 273643F199 |
Agent Smith | void23@null.org | 9GBGFA4F72 |
Agent Smith | void24@null.org | A052BADFB4 |
Agent Smith | void25@null.org | 94386A83D5 |
Agent Smith | void26@null.org | G3BE4FGB51 |
Agent Smith | void27@null.org | 3D445AC2C9 |
Agent Smith | void28@null.org | G64A730E80 |
Agent Smith | void29@null.org | 2G2EF3B86C |