无限滚动：向上滚动时意外的ajax请求

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

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