如何在 Rails 中实现无限滚动

Posted 2023-05-09

【中文标题】如何在 Rails 中实现无限滚动

【英文标题】：How to implement Infinite Scrolling in Rails

【发布时间】：2019-09-23 10:46:23

【问题描述】：

您好，我正在使用 ruby​​-2.2.2 和 rails 4 开发一个 ROR 项目。我已经在我的网页中实现了无限滚动到特定区域（特定于 div）并且它工作正常，但是每当添加水平滚动时通过增加表格的宽度或增加表格内“td”的数量到该 div，它会在单个滚动上发送对同一页面的多个请求。

html page:
<div class="ibox-content" style="height: 450px;overflow-y: scroll;" id="user_mangmnet_scroll_div">
  <table class="table table-hover">
    <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Address</th>
      <th>Zipcode</th>
      <th>Phone Number</th>
      <th>Email</th>
      <th>User Type</th>
      <th>Actions</th>
    </tr>
    </thead>
    <tbody id="user_management_container">
      <%= render 'dashboard/dashboards/admin/user_managment.html.erb' %>
    </tbody>
  </table>
</div>
<div id="user-pagination-container">
  <%= will_paginate @user_registered %>
</div>

jQuery:

$(document).ready(function() 
    if ($('#user-pagination-container .pagination').length) 
      $('#user_mangmnet_scroll_div').scroll(function() 
        var url = $('#user-pagination-container .pagination .next_page').attr('href');
        if(url && ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)) 
          return $.getScript(url);
        

      );
      return $('#user_mangmnet_scroll_div').scroll();
    
  );

问题是每当我向 div 添加水平滚动时，它都会在单个滚动上发送对同一页面的多个请求。

请帮助提前谢谢:)

【参考方案1】：

我认为您需要在此处包含我为您找到的答案： Is there a vertical scroll event in jQuery

您检查滚动是否是垂直的，然后才调用操作。

复制粘贴

var prevTop = 0;
$(document).scroll( function(evt) 
    var currentTop = $(this).scrollTop();
    if(prevTop !== currentTop) 
        prevTop = currentTop;
        console.log("I scrolled vertically.");
    
);

让你的代码变成这样：

$(document).ready(function() 
    var prevTop = 0;
    var currentTop = 0;
    if ($('#user-pagination-container .pagination').length) 
      $('#user_mangmnet_scroll_div').scroll(function() 

        currentTop = $(this).scrollTop();
        if(prevTop !== currentTop) 
           prevTop = currentTop
        var url = $('#user-pagination-container .pagination .next_page').attr('href');
        if(url && ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)) 
          return $.getScript(url);
        

         // end of checking if prevTop!==currentTop
      );
      return $('#user_mangmnet_scroll_div').scroll();
    
  );

我没有检查它是否有效。我也不知道你为什么回来

$('#user_mangmnet_scroll_div').scroll(); in if statement...

【讨论】：

谢谢，但它没有解决我的问题...我正在垂直滚动，但是当有水平滚动时，我的垂直滚动发送多个请求。

嗯...你的滚动事件注册了什么？垂直滚动时它会运行两次？

它是我们在任何网站上看到的正常滚动，但是当我滚动一次时它会发送多个请求。这意味着滚动条件每次都返回true。