【Ruby on Rails】gem kaminariとjscrollを使用した無限スクロール

開発環境

ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

流れ

1 gemの導入
2 jscrollの導入
3 コントローラーの編集
4 viewの編集
5 jsの編集
6 CSSの編集

gemの導入

Gemfile

gem 'jquery-rails'
gem 'kaminari'

ターミナル

$ bundle install
$ rails g kaminari:config
$ rails g kaminari:views default

app/assets/javascripts/application.js

//= require jquery　←追加
//= require jquery_ujs　←追加
//= require activestorage
//= require turbolinks
//= require_tree .

参考：kaminari
【Ruby on Rails】ページング機能導入

jscrollの導入

①または②で導入します。

①https://github.com/pklauzinski/jscroll/tree/master
こちらのGitHubからzipファイルをダウンロード後、
dist内にあるjquery.jscroll.min.jsを
app/asset/javascripts配下に保存してください。

②head内に書く場合はこちらを使用してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>

①または②を導入後下記のように記述。
※//= require jqueryの下に記述するようにしてください。

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery.jscroll.min.js　←追加
//= require activestorage
//= require turbolinks
//= require_tree .

コントローラーの編集

.page(params[:page]).per(20)を記述することにより、
20個の要素を表示します。

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
    @posts = Post.page(params[:page]).per(20)
  end
end

viewの編集

div内のクラス名をjQueryで編集していきます。

app/viws/posts/index.html.erb

<div class="scroll-list jscroll">
  <% @posts.each do |post| %>
    <span><%= post.post_title %></span>
  <% end %>
  <%= paginate @posts %>
</div>

jsの編集

今回は画面下5%までスクロールした際に
新しくロードするようにします。
※クラス名は先程指定したものをお使いください。

app/assets/javascripts/application.js

$(window).on('scroll', function() {
  scrollHeight = $(document).height();
  scrollPosition = $(window).height() + $(window).scrollTop();
  if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
    $('.jscroll').jscroll({
      contentSelector: '.scroll-list',
      nextSelector: 'span.next:last a'
    });
  }
});

CSSの編集

app/assets/stylesheets/application.scss

nav.pagination {
  display: none;
}
.scroll-list {
  padding: 0;
}

まとめ

無限スクロールはTwitterやインスタグラムでも採用されているため、
表示が多い場合は導入すべき機能になります。

またtwitterではQiitaにはアップしていない技術や考え方もアップしていますので、
よければフォローして頂けると嬉しいです。
詳しくはこちら　https://twitter.com/japwork