如何在Rails中實現無限滾動

Question

嗨我正在使用ruby-2.2.2和rails 4進行ROR項目。我在我的網頁中實現了一個無限滾動到特定區域（特定於div）並且它工作正常，但每當水平滾動與該div相關時通過增加表的寬度或增加表中“td”的數量，它會在單個滾動上發送對同一頁面的多個請求。

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添加水平滾動時它會在單個滾動上發送多個同一頁面的請求。

請幫助提前謝謝:)

Answer 1

我想你需要在這里找到我找到的答案： 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...