[Ruby on Rails] Infinite scrolling using gem kaminari and jscroll

Development environment

ruby 2.5.7 Rails OS: macOS Catalina


Introduction of 1 gem 2 Introduction of jscroll 3 Edit controller 4 Edit view Edit 5 js 6 CSS editing

Introduction of gem


gem 'jquery-rails'
gem 'kaminari'


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


//=require jquery ← added
//= require jquery_ujs ← added
//= require activestorage
//= require turbolinks
//= require_tree .

Reference: kaminari [Ruby on Rails] Paging function introduced

Introduction of jscroll

Introduce in ① or ②.

①https://github.com/pklauzinski/jscroll/tree/master After downloading the zip file from this GitHub, jquery.jscroll.min.js in dist Please save it under app / asset / javascripts.

(2) Use this when writing in the head.


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

After introducing ① or ②, describe as follows.


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

Editing the controller

By writing .page (params [: page]) .per (20) Shows 20 elements.


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

Edit view

Edit the class name in the div with jQuery.


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

Editing js

This time when scrolling to the bottom 5% of the screen Try to load a new one.


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

CSS editing


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


Infinite scrolling is also used on Twitter and Instagram, so If there are many displays, it is a function that should be introduced.

Also, on twitter, technologies and ideas that have not been uploaded to Qiita are also uploaded, so I would be grateful if you could follow me. Click here for details https://twitter.com/japwork

Recommended Posts

[Ruby on Rails] Infinite scrolling using gem kaminari and jscroll
[Ruby on Rails] Code check using Rubocop-airbnb
Notes on using FCM with Ruby on Rails
[Ruby on Rails] How to use kaminari
Ruby and Gem
[Ruby on Rails] How to log in with only your name and password using the gem devise
Ruby on Rails ~ Basics of MVC and Router ~
[Ruby on Rails] Add and delete tags and display (success / error) messages using ajax.
Ruby on Rails Elementary
Ruby on Rails basics
Ruby On Rails Association
[Ruby on Rails] Common processing between controllers (using concaves)
Ruby on Rails environment construction using VirtualBox, Vagrant, cyberduck
Try using the query attribute of Ruby on Rails
Ruby on rails learning record -2020.10.03
Portfolio creation Ruby on Rails
Ruby on Rails Email automatic sending function setting (using gmail)
Ruby on rails learning record -2020.10.04
[Ruby on Rails] Debug (binding.pry)
Ruby on rails learning record -2020.10.05
Ruby on rails learning record -2020.10.09
Ruby on Rails config configuration
[Ruby on Rails] about has_secure_password
Commentary on partial! --Ruby on Rails
Ruby on rails learning record-2020.10.07 ①
Cancel Ruby on Rails migration
Ruby on Rails validation summary
Ruby on Rails Basic Memorandum
[Ruby on Rails] Cookie is used and displayed only once at the first access (using jquery.cookie.js)
[Ruby on Rails] Change the save destination of gem refile * Note
(Ruby on Rails6) Creating a database and displaying it in a view
Explanation of Ruby on rails for beginners ⑤ ~ Edit and delete database ~
Create a development environment for Ruby 3.0.0 and Rails 6.1.0 on Ubuntu 20.04.1 LTS
Things to remember and concepts in the Ruby on Rails tutorial
Ruby on Rails Overview (Beginner Summary)
[Ruby on Rails] Read try (: [],: key)
[Ruby on Rails] yarn install --check-files
Ruby on Rails variable, constant summary
Installing Ruby + Rails on Ubuntu 18.04 (rbenv)
[Ruby on Rails] Introduced paging function
Basic knowledge of Ruby on Rails
Progate Ruby on Rails5 Looking Back
Install Ruby 2.5 on CentOS 7 using SCL
How to use Ruby on Rails
[Ruby on Rails] Add / Remove Columns
(Ruby on Rails6) "Erase" posted content
Ruby on Rails 6.0 environment construction memo
[Ruby on Rails] What is Bcrypt?
[Ruby on Rails] Confirmation page creation
Ruby On Rails devise routing conflict
[Ruby on Rails] Comment function implementation
Project ruby and rails version upgrade
[Ruby on Rails] Convenient helper method
Installing and using Ansible on Ubuntu 16.04
[Ruby on Rails] Stop "looping until ..."
How to create a query using variables in GraphQL [Using Ruby on Rails]
How to build a Ruby on Rails environment using Docker (for Docker beginners)
Ruby on Rails ✕ Docker ✕ MySQL Introducing Docker and docker-compose to apps under development
[Ruby On Rails] How to search the contents of params using include?
[Rails] Manage multiple models using devise gem
[Ruby on Rails] Search function (not selected)