Create an infinite scroll with Infinite Scroll and kaminari

Complete system

2021-01-17 (2).png

Development environment

rails 6.0.2
ubuntu(wsl)
InfiniteScroll 4.0.1

Advance preparation

--Post list --Demo data of post list --Introduction of kaminari

procedure

Introduction of infinite-scroll

From here Please download. You can also use a CDN. I put it in vendor/assets/javascripts /. (The place can be anywhere.) An error occurred if the reading location here was different. I think it's a good idea to put it directly under // = require_tree ..

`application.js`


//= require infinite-scroll.pkgd.min

Implemented infinite scrolling

`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",
    });
  };
});

I think it's best to look at the Official Site, but I'll explain the options. path: Specify the URL of the next page to load (required) append: Specify the element to be added in the contents of the next page read. If you make a mistake here, the layout will collapse. history: Change the url and keep the history. If false, it will be a fixed url. hideNav: Specify the navigation to hide. scrollThreshold: Does scrolling automatically load? If false, it will not be read. button: Specify the button element to load the page. status: Specify what to display during reading or after reading all.

Partial template and post list view

Please refer to here for css.

`talks/_infinitescroll.html.slim`


.loadmore-btn-wrapper.p-0.d-flex
  button.loadmore-btn.btn.active.mx-auto Show more
.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
        #abridgement
          = link_to simple_format(h(talk.content), {}, sanitize: false, wrapper_tag: "div"), talk
  = paginate @talks
  = render "infinitescroll"

At the end

If you make a mistake, please make an edit request or comment. If that doesn't work, try your best with developer tools.

References

loader-ellips