加载更多数据ajax PHP onscroll

Question

我正在页面上加载大约1000种产品，并想到了OnScroll加载的以下方法。

以下是我遵循的方法：

<ul id="productContainer">
</ul>

JQuery的：

$(document).ready(function() {
   var track_load = 0; //total loaded record group(s)
   var loading  = false; //to prevents multipal ajax loads
   var total_groups = 5;
   $('#productContainer').load("loadmore", 
    {'group_no':track_load}, function() {track_load++;});
   $(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() == 
      $(document).height()) {
        if(track_load <= total_groups && loading==false){
           loading=true;
            $.post('store/loadmore',{'group_no': track_load}, 
            function(data){
               $("#productContainer").append(data).fadeIn(); 
               track_load++; //loaded group increment
               loading = false;
            });
        }
     }
   });
});

PHP

$items_per_group = 25;
$get_total_rows = /*count from SQL table*/
$total_groups = ceil($get_total_rows/$items_per_group);

if(isset($_POST)){
      $group_number = filter_var($_POST["group_no"], 
       FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

       if(!is_numeric($group_number)){
        header('HTTP/1.1 500 Invalid number!');
        exit();
       }

       $position = ($group_number * $items_per_group);
       /*PHP Query*/
}

该解决方案运行良好，但存在以下问题：

1. 仅当用户滚动到页面的最后一页时才加载产品- But needed thing is that as soon as user reaches last element of current view then next products shall be loaded.
2. 第一次滚动完成页面底部之后，然后我又向上滚动，则触发了AJAX调用。

我如何防止这些问题，然后我将有很好的解决方案。

我也尝试以下解决方案：

if($(window).scrollTop() + $(window).height() == 
      $(document).height()-`200[height of footer]`) {}

第二解决方案

var end = $("#copyright").offset().top;<br/>
  var viewEnd = $(window).scrollTop() + $(window).height();<br/>
  var distance = end - viewEnd;<br/>
  if(distance <400{load products ajax}

但是似乎都没有按预期工作

Answer 1

这是检查元素在可滚动容器中是否可见的基本概念： http : //jsfiddle.net/7fpqcqw1/

window.elementInView = false;
function isScrolledIntoView(elem) {
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    window.elementInView = ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) ? true : false;

    return window.elementInView;
}

在调用isScrolledIntoView（elem）的任何地方使用window.elementInView变量，条件是仅返回一次且不再调用该函数。

此功能由另一个用户在另一个堆栈溢出问题中提供： 滚动后检查元素是否可见