加載更多數據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變量，條件是僅返回一次且不再調用該函數。

此功能由另一個用戶在另一個堆棧溢出問題中提供： 滾動后檢查元素是否可見