From the course: Building Full-Stack Applications with HTMX
Unlock this course with a free trial
Join today to access over 25,300 courses taught by industry experts.
Project 3: Infinite scroll - HTMX Tutorial
From the course: Building Full-Stack Applications with HTMX
Project 3: Infinite scroll
- [Instructor] In this section, we'll be building an infinite scroll feature with htmx on a Node.js backend. We'll be creating and populating a database of articles we will then create a page where users can view the article titles. When a user loads the page an initial amount of titles are displayed. As the user begins to scroll, multi tools are appended to the list. This way the user can continue to scroll and see more articles and the page content will expand as much as necessary for the currently displayed titles. The user can then keep scrolling and as they scroll multi tools will be appended into the view until all titles in the database are displayed. If at any point the user stops scrolling, no new articles will be appended until the user continues scrolling again. Typical to the behavior that is now common on almost every social media feed today. To implement this functionality, we'll be making use of htmx events triggers and swap styles to incrementally load and append more…