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>D92D630F53</td></tr>
<tr><td>Agent Smith</td><td>void11@null.org</td><td>5551AFAD8G</td></tr>
<tr><td>Agent Smith</td><td>void12@null.org</td><td>169BAAAB50</td></tr>
<tr><td>Agent Smith</td><td>void13@null.org</td><td>1E...
Name | ID | |
---|---|---|
Agent Smith | void10@null.org | D92D630F53 |
Agent Smith | void11@null.org | 5551AFAD8G |
Agent Smith | void12@null.org | 169BAAAB50 |
Agent Smith | void13@null.org | 1EFEG31FE8 |
Agent Smith | void14@null.org | 38369235E2 |
Agent Smith | void15@null.org | 0960684CE9 |
Agent Smith | void16@null.org | 8CC69DD60C |
Agent Smith | void17@null.org | C5F002C340 |
Agent Smith | void18@null.org | 86CF2B57G7 |
Agent Smith | void19@null.org | B7GG444A4E |
Agent Smith | void20@null.org | 2DE33C110C |
Agent Smith | void21@null.org | 8767DG4G29 |
Agent Smith | void22@null.org | B9C85FBFF0 |
Agent Smith | void23@null.org | 7GGCADD040 |
Agent Smith | void24@null.org | 84CF12454B |
Agent Smith | void25@null.org | 7D88FBG5ED |
Agent Smith | void26@null.org | 3872G945AG |
Agent Smith | void27@null.org | 501EC1B175 |
Agent Smith | void28@null.org | 8144D4409E |
Agent Smith | void29@null.org | 1319630ABG |