Infinite scroll: unintended ajax request when scrolling up

Question

I use the code below for sending ajax request to get more products on scroll down event. However it also sends ajax request when I scroll up, which is not intended. How can I modify it so that it will send a request only when I scroll it to the bottom?

_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

You'll need to detect the direction of the scroll and add that as a boolean check. This post covers it.

The snippet they provide:

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

So you'll probably do something like:

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

Answer 2

I have changed the below line

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

to

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

this worked for me. Hope this can help others too. Thanks