doubipeng1336 2013-12-10 07:44
浏览 40
已采纳

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

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);
});
  • 写回答

2条回答 默认 最新

  • dtjpz48440 2013-12-10 12:11
    关注

    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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?