jQuery判断div滚动到底部,并加载数据的示例,防止重复加载

（1）简单示例：

    var msg_list_loading = false;  
    $('.msg_list').on('scroll', function(){  
        if ( ! msg_list_loading ){  
            load_more_msg();  
        }  
    })  
          
    function load_more_msg(){     
        var msg_list = $('.msg_list');  
        if ( msg_list.height() + msg_list[0].scrollTop >= msg_list[0].scrollHeight - 60 ) {   
            msg_list_loading = true;  
            msg_list.append('<div class="loading"></div>');  
            $.get('ajax_data.html').done(function( data ){   
                msg_list.find(".loading").remove();  
                msg_list.append( data );  
                msg_list_loading = false;  
            });  
        }   
    }   

简单说明：

1、先建立一个变量，判定是否加载中，防止重复加载，
2、在元素上监听scroll事件，调用load_more_msg方法
3、load_more_msg方法中每次重新查找元素，赋给一个变量，判断css高度+滚动的距离，与整个div的文档高度，后面的-60，是一个padding top和bottom的值，可以自行设置。其中msg_list[0]是调用javascript原生对象非jquery对象，方法不同。
4、如果条件为true，锁定加载，ajax调取数据，并执行加载，取消锁定。 

上面是转载作者的，下面自己实际用到

（2）下拉加载分页示例：

 var appPageSize = 20;
        var msg_list_loading = false;
        $('.listAddress').on('scroll', function () {
            if (!msg_list_loading) {
                load_more_msg();
            }
        })

        function load_more_msg() {
            var msg_list = $('.listAddress');
            if (msg_list.height() + msg_list[0].scrollTop >= msg_list[0].scrollHeight - 60) {
                msg_list_loading = true;  
                //console.log("加载更多");
                GetList($("#hidAppPageIndex").val(), $("#txtAppName").val());
            }
        }   

        GetList(1);
        function GetList(pageIndex) {
            $.ajax({
                url: "/data/getlist",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({
                    Id: 1,
                    pageIndex: pageIndex,
                    pageSize: appPageSize
                }),
                success: function (result) {

                    if (result.resultCode == 1) {
                        var objAppList = result.data;
                        var totalCount = result.totalCount;

                        if (objAppList != null && objAppList.length > 0) {
                            $.each(objAppList, function (index, item) {
                                var strHtml = "";
                                strHtml += "<a href='javascript:void(0)' data-id='" + item.Id+"'><span>" + item.Name+"</span>";
                                strHtml += "<i class='glyphicon glyphicon-log-out'></i>";
                                strHtml += "</a>";
                                $(".listAddress").append(strHtml);
                            });
                        }

                        msg_list_loading = false;  
                        if (objAppList.length < appPageSize) {
                            msg_list_loading = true;
                        }

                        $("#hidAppPageIndex").attr("value", parseInt($("#hidAppPageIndex").val()) + 1);
                    }
                }
            });
        }

转载地址： https://wen66.iteye.com/blog/2265904