How to infinite scroll with Kaminari in rails 6?

Question

I am looking for solution for infinite scroll with Kaminari in my project, but it still does not work as expected.

In my home page have view for render post:

<div class="home_post_tab_content">
    <%if @posts.present?%>
        <div id="home_post_infinite_scroll">
            <%= render @posts %>
        </div>
        <%if @posts.total_count > 10%>
            <div class="home_post_pagination_button" id="home_post_pagination">
                <%= link_to_next_page(@posts, 'Xem thêm', :remote => true) %>
            </div>
        <%end%>
    <%end%>
</div>

Controller:

respond_to do |format|
  format.html {}
  format.js
end

Script file:

// Append new data
$("<%=j render @posts %>").appendTo($("#home_post_infinite_scroll"));

// Update pagination link
<% if @posts.last_page? %>
  $('#home_post_pagination').remove();
<% else %>
  $('#home_post_pagination').html("<%=j link_to_next_page(@posts, 'See more', :remote => true) %>");
<% end %>

Q: How can I trigger the next button when user scrolls in end of page (jquery or JS...)? Or, If any one has another solution for infinite scroll please let me know. Thanks so much!

Answer 1

I found the solution for resolve it:

<script>
                                $(document).on('turbolinks:load', function() {
                                    $(window).scroll(function() {
                                        var next_url = $("#home_post_pagination a[rel='next']").attr('href');       
                                        if (next_url && ($(window).scrollTop() > ($(document).height() - $(window).height() - 5000))) {         
                                            $('#home_post_pagination').show();
                                            $('#home_post_pagination').html('<a>Loading...</a>');
                                            $.getScript(next_url);
                                            return;
                                        }
                                    });
                                    return $(window).scroll();
                                });
                            </script>

The $.getScript(next_url) will be trigger next button on scroll