Infinite Scrolling with Ajax in Ruby on Rails.

In controller.rb

Add the pagination with all records in index method

def index
  @listing = Listing.paginate(:per_page=>10, :page=>params[:page])
end

In index.html.erb

Add scrolling script and partial file for appending the display data in index file.
       
 <div class='main'>
 <div id='listing_data'%>
      <%= render partial: 'list_info', locals: {listing: @listing} %>
  </div>

  <input type='hidden' id='next_page_count' value='2'>

  <div class="pagination display_none"></div>
  <div class="display_none">
      <a class="btn view_more" href="#" data-remote="true">Loading</a>
  </div>
 </div>

<script type='text/javascript'>
var queryString = window.location.search;
var pathname = window.location.pathname;
var url = pathname + queryString;

pagination_url = queryString.length > 0 ? url+'&page=<%=@page['next_page']%>' : url+'?page=<%=@page['next_page']%>';
$('.view_more').attr("href",pagination_url);

 var count = $('#next_page_count').val();
       
 $(window).scroll(function(){
      if  ($(window).scrollTop() == $(document).height() - $(window).height()){
          //if the next page is empty stop ajax calling
            if ($('#next_page_count').val() == ""){
                 return false;
            }else{
                  loadActivity();
            }
       }
    });

  #ajax callling       
  function loadActivity() {
      $('.view_more').click();     
    }
</script> 

In index.js.erb

Add the rendering data here.

$('#next_page_count').val('<%=@page['next-page']%>');

var queryString = window.location.search;
var pathname = window.location.pathname;
var url = pathname + queryString;

pagination_url = queryString.length > 0 ? url+'&page=<%=@page['next_page']%>' : url+'?page=<%=@page['next_page']%>';
$('.view_more').attr("href",pagination_url);

<%if @page['current_page'].to_i == 1 && @page['total_pages'].to_i > 0 %>
 $('#listing_data').html('<%= escape_javascript(render partial: 'list_info', locals: { listing: @listing }) %>');
<%else%>
 $('#listing_data').append('<%= escape_javascript(render partial: 'list_info', locals: { listing: @listing }) %>');
<%end%> 

Whenever scrolling is happening need to call the next page with ajax calling.if params[:next_page] is null stop the ajax calling.