Infinite Scroll

The infinite scroll pattern provides a way to load content dynamicallyon user scrolling action. This example is almost identical the the Click To Load.

• Full Code at GitHub
• Source at htmx.org

Check the Click To Load example. The only difference is the render() implementation with the introduction of the hx_trigger and hx_swap attributes. In the Click To Load example, we used the LoadMoreButton to trigger the load action. Here is the updated render() method:

 1   @app.endpoint("/contacts/")
 2   class ContactsSlice(Endpoint[ContactsSliceAttrs]):
 3       ...
 4   
 5       @override
 6       def render(self) -> Blank[TableRow]:
 7           *init, last = (
 8               (contact["id"], contact["name"], contact["email"])
 9               for contact in self.attrs["contacts"]
10           )
11           return Blank(
12               *(TableRow(*rows) for rows in init),
13               TableRow(
14                   *last,
15                   hx_get=self.url_for(ContactsSlice).include_query_params(
16                       page=self.attrs["page"] + 1
17                   ),
18                   hx_trigger="revealed",
19                   hx_swap="afterend",
20               ),
21           )