如何在 Rails 6 中使用 Kaminari 无限滚动？答案

【问题标题】：How to infinite scroll with Kaminari in rails 6?如何在 Rails 6 中使用 Kaminari 无限滚动？
【发布时间】：2021-07-15 16:00:32
【问题描述】：

我正在寻找在我的项目中使用 Kaminari 进行无限滚动的解决方案，但它仍然无法按预期工作。

在我的主页上有渲染帖子的视图：

<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>

控制器：

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

脚本文件：

// 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 %>

问：当用户滚动到页面末尾（jquery 或 JS...）时，如何触发下一个按钮？或者，如果有人有另一种无限滚动的解决方案，请告诉我。非常感谢！

【问题讨论】：

标签： ruby-on-rails infinite-scroll

【解决方案1】：

我找到了解决方法：

<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>

$.getScript(next_url) 将在滚动时触发下一个按钮

【讨论】：