div滚动到底部自动加载

重点：
一开始一直进不了滚动事件，最后发现是因为需要滚动元素的父元素没有设置overflow：hidden;记住了！！
如果不设置fixed的话，就要设置元素固定的高！！
css

        #contentBox {
            flex: 1;//父元素设置display：flex
            overflow: auto;
            margin-bottom: 20px;
/*          height:529px;*/
        }

html

        <div id="contentBox">
            <div id="schoolDeatl">

            </div>
            <div class="loadDiv" style="width: 100%; font-size: 15px; text-align: center; margin-top: 8px;">加载更多</div>
        </div>

js

var count = 5;//每次加载 请求的条数
var isLoad = true;//是否允许加载数据
$(function(){
 userScroll()
 loadScenePage()
})
//滚动条到底就加载
function userScroll() {
    $("#contentBox").scroll(function () {
        var nHeight = $(this).outerHeight();
        var nScrollHight = $(this)[0].scrollHeight;
        var nScrollTop = $(this)[0].scrollTop;
        if (nScrollHight - (nScrollTop + $(this).height()) < 130) {
            if (!isLoad) {
                return;
            }
            isLoad = false;
            //if (Number($("#pageIndex").val()) > Number($("input[name=PageAll]").last().val())) {
            if (Number($("#pageIndex").val()) > 2) {
                $("div[class=loadDiv]").text("已经没有更多数据");
                return;
            }
            loadScenePage();
        }
    });
}
//获取数据
function loadScenePage() {
    var param = getPara();
    $(".loadDiv").text("加载中...");
    isLoad = false;
    $.ajax({
        type: "POST",
        url: "/SceneManager/SceneSchool/FoodDistributionPage",
        data: {
            schoolName: param.schoolName,
            pageIndex: param.pageIndex,
            count: param.count,
            searchTime: param.date,
            platId: platId,
            schType: param.schType,
            BT: param.BT,
            sceneTypeName:"今日食材"
        },
        success: function (data) {
            $(".loadDiv").text("加载更多");
            //if ($("#pageIndex").val())
            $("#schoolDeatl").append(data);
            $("#pageIndex").val(Number($("#pageIndex").val()) + 1);
            if ($("#pageIndex").val() >= $("input[name=PageAll]").last().val()) {
                $("div[class=loadDiv]").text("已经没有更多数据");
            }
             //$("input[name=PageAll]").last().val()这个值是后台传给我的总页数
            isLoad = true;
        },
        error: function () {
            isLoad = true;
        }
    });
}
//获取参数（不重要，传给后台需要的参数而已）
function getPara() {
    var para = {};
    var schoolName = $("#schoolNameInput").val();
    var pageIndex = $("#pageIndex").val();
    var date = $("#endTime").val();
    para.schoolName = schoolName;
    para.pageIndex = pageIndex;
    para.count = count;
    para.date = date;
    para.schType = [];
    $("#school_C li").each(function (i, ele) {
        if ($(this).hasClass('C_active')) {
            var h = $(this).attr('value')
            para.schType.push(h)
        }
    });
    para.BT = [];
    $("input[name=jyname]:checked").each(function (i, ele) {
        para.BT.push(parseInt($(ele).val()));
    });
    return para;
}

这个只有我自己看得懂，因为这个是后台传了总共页数给我，而且内容是另一个文件引入的，直接$("#schoolDeatl").append(data);。
如果要改的话，看看获取数据那里能不能改成var html=""…

判断是否滚动的isLoad 问题,因为是先获取的数据再滚动
所以：首先isLoad =false;
获取数据的时候，设置了isload为true;
进入滚动事件时，如果isload=false跳出
继续往下走 再设置isload=false

一般情况：
可以首先设置isload=false;
进入滚动时：如果isload=true就跳出
if (isScrolling) {
return
}
继续往下走：设置isload=true;
是因为滚动事件会触发上千次事件，只执行一次就可以了，所以设置isload=true 事件只执行一次就行了，不再继续进入；
执行完事件之后，再恢复isload=false