gorails-screencasts/infinite-scroll-stimulus-js

Infinite scroll with Stimulus.js, Pagy, and Rails example

README

This README would normally document whatever steps are necessary to get the application up and running.

Things you may want to cover:

• Ruby version

• System dependencies

• Configuration

• Database creation

• Database initialization

• How to run the test suite

• Services (job queues, cache servers, search engines, etc.)

• Deployment instructions

• ...

infinite-scroll-stimulus-js's Issues

Note to jsbundling/esbuild users (Rails is not defined)

You will probably need this in your application.js 👍

// Infinite scroll requires Rails to be globally defined
// https://github.com/rails/rails/issues/36686
import Rails from "@rails/ujs";
window.Rails = Rails;

if(Rails.fire(document, "rails:attachBindings")) {
  Rails.start();
}

Force Scroll function to load only once.

Chris,

Thanks for the code and the video, I appreciate your work!

I am working on the implementation of infinite-scroll in my Django + Stimulusjs app. In my controller I am using your original solution:

var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.offsetHeight)

if (window.pageYOffset >= height - window.innerHeight) {
  this.loadMore(url, entries, pagination)
}

This is supposed to call loadMore when the user scrolls all the way to the bottom. It works fine (https://builtwithdjango.com). The problem I am running into is when browsing with Safari the loadMore function is called more than once, which causes the stimulus-controller add same sites (from same page) multiple times. I end up with duplicates.

Is there a way to tell my controller to call loadMore function only once.

P.S. If I was to change the if statement to run the controller little bit higher than the bottom of the page, say 50px:

if (window.pageYOffset >= height - window.innerHeight - 50) {
  this.loadMore(url, entries, pagination)
}

This would also cause the script to be called more than once. I'm not sure how to stop this behavior. Do you happen to know how to fix this? Thanks a ton in advance.