InfiniteScrollとkaminariで無限スクロールを作る

完成系

開発環境

rails 6.0.2
ubuntu(wsl)
InfiniteScroll 4.0.1

事前準備

• 投稿一覧
• 投稿一覧のデモデータ
• kaminariの導入

手順

infinite-scrollの導入

ここからダウンロードしてください。
CDNを使ってもokです。
自分はvendor/assets/javascripts/に置きました。（場所はどこでも良いです。）
ここの読み込む場所が違うとエラーになりました。
//= require_tree .の真下に置くと良いと思います。

application.js

//= require infinite-scroll.pkgd.min

無限スクロールを実装

talk.js

$(document).on('turbolinks:load', function () {
  if ($("nav ul.pagination a[rel=next]").length) {
    $('.talk-cards').infiniteScroll({
      path: "nav ul.pagination a[rel=next]",
      append: ".talk-cards .card-index",
      hideNav: "nav ul.pagination",
      history: false,
      scrollThreshold: false,
      button: ".loadmore-btn",
      status: ".page-load-status",
    });
  };
});

公式サイトを見るのが一番良いと思いますが、オプションの説明しておきます。
path：次に読み込むページのURLの指定（必須）
append：読み込んだ次ページの内容のうち、追加する要素の指定。ここを間違るとレイアウト崩れたりする。
history：urlを変更し、履歴を残すか。 falseなら固定のurlになる。
hideNav：非表示にするnavigationを指定する。
scrollThreshold：スクロールで自動で読み込むか。 falseなら読み込まない。
button：ページをロードするためのボタン要素の指定。
status：読み込み中や全部読み込んだ後に表示するもの指定。

部分テンプレートと投稿一覧のビュー

cssはこちらを参考にしてください。

talks/_infinitescroll.html.slim

.loadmore-btn-wrapper.p-0.d-flex
  button.loadmore-btn.btn.active.mx-auto さらに表示
.page-load-status style="display: none"
  .infinite-scroll-request
    .loader-ellips
      span.loader-ellips__dot
      span.loader-ellips__dot
      span.loader-ellips__dot
      span.loader-ellips__dot

talks/index.html.slim

.talk-cards
  - @talks.each do |talk|
    .card.mx-auto.card-index
      .card-body
        .card-title.text-muted.user-info
        #省略
          = link_to simple_format(h(talk.content), {}, sanitize: false, wrapper_tag: "div"), talk
  = paginate @talks
  = render "infinitescroll"

終わりに

もし間違がありましたら、編集リクエスト又はコメントお願いします。
上手く行かない場合は、developer toolsを使って頑張ってください。

参考文献

• loader-ellips