Бесконечный прокрутка: непреднамеренный запрос ajax при прокрутке вверх

Question

Я использую код ниже для отправки запроса ajax, чтобы получить больше продуктов при прокрутке вниз. Однако он также отправляет запрос ajax при прокрутке вверх, что не предназначено. Как я могу изменить его так, чтобы он отправил запрос только тогда, когда я прокрутил его до конца?

_debug = true; 

function dbg(msg) { 
    if (_debug) console.log(msg); 
} 

$(document).ready(function() { 
    $(".item-block img.lazy").lazyload({ 
     effect: "fadeIn" 
    }); 


    doMouseWheel = 1; 
    $("#result").append("<p id='last'></p>"); 
    dbg("Document Ready"); 

    var scrollFunction = function() { 
     dbg("Window Scroll Start"); 
     /* if (!doMouseWheel) return;*/ 
     var mostOfTheWayDown = ($('#last').offset().top - $('#result').height()) * 2/3; 
     dbg('mostOfTheWayDown html: ' + mostOfTheWayDown); 
     dbg('doMouseWheel html: ' + doMouseWheel); 
     if ($(window).scrollTop() >= mostOfTheWayDown) { 

      $(window).unbind("scroll"); 

      dbg("Window distanceTop to scrollTop Start"); 

      $('div#loadMoreComments').show(); 

      doMouseWheel = 1; 

      dbg("Another window to the end !!!! " + $(".item-block:last").attr('id')); 
      $.ajax({ 
       dataType: "html", 
       url: "search_load_more.php?lastComment=" + $(".item-block:last").attr('id') + "&" + window.location.search.substring(1), 
       success: function (html) { 
        doMouseWheel = 0; 
        if (html) { 

         $("#result").append(html); 
         dbg('Append html: ' + $(".item-block:first").attr('id')); 
         dbg('Append html: ' + $(".item-block:last").attr('id')); 

         $("#last").remove(); 
         $("#result").append("<p id='last'></p>"); 
         $('div#loadMoreComments').hide(); 
         $("img.lazy").lazyload({ 
          effect: "fadeIn" 
         }); 

         $(window).scroll(scrollFunction); 

        } else { 
         //Disable Ajax when result from PHP-script is empty (no more DB-results) 
         $('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>No more styles</h1></center>"); 
         doMouseWheel = 0; 
        } 
       } 
      }); 
     } 
    }; 
    $(window).scroll(scrollFunction); 
}); 

Answer 1

Я изменил строку ниже

if ($(window).scrollTop() >= mostOfTheWayDown) 

в

if($(window).height() + $(window).scrollTop() == $(document).height()) 

Это сработало для меня. Надеюсь, это тоже поможет другим. Спасибо

Answer 2

Вам нужно будет определить направление прокрутки и добавить это как булевскую проверку. This post покрывает его.

Сниппет они обеспечивают:

var lastScrollTop = 0; 
$(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
     // downscroll code 
    } else { 
     // upscroll code 
    } 
    lastScrollTop = st; 
}); 

Таким образом, вы, вероятно, сделать что-то вроде:

$(window).scrollTop() >= mostOfTheWayDown && st > lastScrollTop