개시하다

Rails로 무한 스크롤을 시도했기 때문에 그 메모 형식으로 투고하고 싶어요.
카미나리라는 페이지의 단자를 간단하게 실현할 수 있는gem를 사용해서 무한 스크롤을 시도해 보려고 합니다.
jscroll의 jQuery 라이브러리를 무제한으로 스크롤합니다.

이른바 무한 스크롤

무한 스크롤은 메일 속 상품 일람에서도 볼 수 있으며, 아래로 스크롤하면 새 상품이 자동으로 읽힌다.
먼저 무한 스크롤의 페이지 스타일을 실현해야 합니다.
페이지의 단자는 카미나리라는gem을 사용합니다.
Rails 버전은 5입니다.

kaminari 설치

Gemfile

gem 'kaminari'

다음을 클릭합니다.

bundle install

실행만

jscroll 설치

jscroll에 현재(2019년 2월)gem가 존재하지 않기 때문에 공식 페이지에서 다운로드해 왔습니다.
또한 jscroll을 사용하려면 jQuery가 필요합니다.
rails에서 jQuery를 사용하려면 여기
공식 페이지

CDN 사용 가능

가볍게 해보고 싶은 사람이 여기 있다.

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

로컬 폐기

이쪽 디스트에서 jquery까지.jscroll.민제이스 다운로드하러 갈게요.
jscroll의 Giithub
그리고 asset/javascripts의 jquery에 다운로드하세요.jscroll.min.js를 배치합니다. (읽으면 어디에 있든지)
assets/javascripts/application.js

//= require jquery.jscroll.min.js

.

설치 페이지 스타일

이번에는 DB에 등록된 프로그래밍 언어만 한눈에 보여주는 화면을 만들려고 한다.
skills라는 controller를 제작하여 다음과 같은 내용을 기재합니다.
skills_controller.rb

class SkillsController < ApplicationController
  def index
    @skills = Skill.page(params[:page]).per(10)
  end
end

.page(params[:page]).per(10)의 부분은 한 화면에 10개의 요소를 나타낸다.
그리고 index.html.erb
index.html.erb

<ul class="skill-list jscroll">
  <% @skills.each do |skill| %>
    <li><%= skill.skill_name %></li>
  <% end %>
  <%= paginate @skills %>
</ul>

<%=paginate@skills%>의 부분은 페이지의 부분입니다.
위에서 말한 바와 같이 페이지의 연결 문자를 실현할 수 있다.간단하네.
아래의 화면이 되었다.

무한 스크롤 실현

무한 스크롤 가능:.
다음 원본은 화면을 열 때 다음 요소를 불러오는 것입니다.
coffeescript
skills.coffee

$ ->
  $('.jscroll').jscroll
  return

jQuery

$(function() {
  $('.jscroll').jscroll;
});

다만, 이것만은 움직일 수 없다.다음 페이지로 링크를 지정해야 하기 때문입니다.
이렇게 하면 화면을 불러오면 자동으로 다음 페이지를 불러옵니다.
coffeescript
skills.coffee

$ ->
  $('.jscroll').jscroll
    nextSelector: 'span.next a'
  return

jQuery

$(function() {
  $('.jscroll').jscroll({
    nextSelector: 'span.next a'
  });
});

다음 링크를 지정하려면 nextSelector를 지정합니다.
다만, 여기만 보면 이상할 것 같아.

읽는 곳이 빗나갔어요. js의constore를 보면 rails-ujs 같은 오류가 나온 것 같아요.
이는 다음 페이지의')'를 모두 읽고 자바스크립트 등도 반복해서 읽어들이기 때문에 오류가 발생한 것이다.
따라서 다음 페이지에서 읽을 요소를 지정한 다음 이 요소만 읽습니다.
coffeescript
skills.coffee

$ ->
  $('.jscroll').jscroll
    contentSelector: '.skill-list'
    nextSelector: 'span.next:last a'
  return

jQuery

$(function() {
  $('.jscroll').jscroll({
    contentSelector: '.skill-list',
    nextSelector: 'span.next:last a'
  });
});

다음에 불러올 요소로ul의.skill-list가 지정되었습니다.
nextSelector span에 있습니다.next:lasta에서 last를 지정한 것은
링크를 읽으면 계속 증가합니다.
따라서 읽을 마지막 링크를 지정하면 다음 페이지를 계속 읽을 수 있습니다.
울이가 패딩을 깜빡했네.
skills.scss

ul.skill-list {
  padding: 0;
}

.그러면 아래와 같다.

그리고 페이지 부분이 너무 거추장스러워요.
skills.scss

nav.pagination {
  display: none;
}

에서 페이지 섹션을 표시하지 않습니다.

최종 화면

Loading 시

Loading 이후

그리고 자바스크립트 검사를 화면 아래로 스크롤합니다. $.jscroll을 호출하면 다음 요소를 읽을 수 있습니다.

판정 화면 아래로 스크롤

여기.의 보도를 참고하였다.
coffeescript

$(window).on 'scroll', ->
  scrollHeight = $(document).height()
  scrollPosition = $(window).height() + $(window).scrollTop()
  if (scrollHeight - scrollPosition) / scrollHeight <= 0.05
    # スクロールの位置が下部5%の範囲に来た場合
    $('.jscroll').jscroll
      contentSelector: '.skill-list'
      nextSelector: 'span.next:last a'
    return
  return

jQuery

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

이렇게 하면 화면 아래로 스크롤하면 다음 요소가 자동으로 읽힙니다.

끝말

프로그램 라이브러리 등을 사용하면 매우 간단한 무한 스크롤을 실현할 수 있다.
상당히 트렌디한 페이지를 쉽게 만들 수 있을 것 같아서 꼭 시도해 보세요.