How to implement Infinite Scrolling in Rails

Question

Hi I am working on a ROR project with ruby-2.2.2 and rails 4. i have implemented an infinite scroll in my webpage to a specific area(div specific) and its working fine, but whenever a horizontal scrolling is aded to that div either by increasing the width of the table or by increasing the number of "td" inside the table, it sends multiple request for the same page on a single scroll.

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();
    }
  });

The problem is whenever i added a horizontal scrolling to the div it sends multiple request for the same page on a single scroll.

Please help Thanks in advance :)

Answer 1

I think you need to include this answer that I found for you here: Is there a vertical scroll event in jQuery

You check if scroll was vertical and only then you call action.

copy - paste

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

and make your code something like that:

$(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();
    }
  });

I didnt check if it works. I dont know also why do you return

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