Skip to main content

Infinite Scroll

How it Works

Assume we have HTML code like this

<ul id="task-list-ul">

<nav aria-label="Page navigation example" id="task-list-pagination">
{% if next_url %}
<a href="{{ next_url }}" data-turbo-stream>Load More</a>
{% endif %}


  1. When link has data-turbo-stream, data-turbo-stream allows Turbo Streams to be used with GET requests as well.
  2. On the server side, we can return Turbo Stream response to append task item to the task-list-ul and update the task-list-pagination with the new previous and next link.

This would make manual Load More work as expected.

Auto Scroll

We can create a Stimulus Controler to auto click the Load More button when scrolling


import { Controller } from "@hotwired/stimulus"
import { useIntersection } from 'stimulus-use'

export default class extends Controller {
options = {
threshold: 1

connect() {
useIntersection(this, this.options)

appear(entry) {