Example Page

Infinite Scroll

Below, we’ll demonstrate infinite scrolling with a “Load more” button. Clicking the button will request /partials/infinite_scroll and add new content to the screen. We’ll use the swap mode append to accomplish this. This action requires only Briz.js.

Example

list.html

<!-- the data will be added after last <li> -->
<div>
  <ul data-swap="list:append">
    <li>Table</li>
    <li>Shoes</li>
    <li>Lamp</li>
    <li>....</li>
  </ul>

  <!-- you can add spinner loading here for more good UX -->

  <form data-ajax
    data-swap="trigger"
    action="/partials/infinite_scroll?limit=0"
    method="get"
  >
    <button type="submit">Load more</button>
  </form>
</div>

Demo

• Table
• Shoes
• Lamp

Load more

---

Go back