js滚动到底部加载更多代码片段

js滚动到底部加载更多代码的js和html代码片段，为我爱模板网在做一个C端的项目时写的，在这里记录下。

HTML代码：

<div class="msg-box">
    <div class="msg-list set-scrollbar">
        <div class="loading"></div>
        <table class="msg-list-table">
            <tr>
                <th style="width:60px">客户机</th>
                <th style="width:200px">内容</th>
                <th style="width:150px">时间</th>
                <th style="width:70px">操作</th>
            </tr>
            <tbody id="msgList"></tbody>
            <script id="msgListTmp" type="text/x-dot-template">
                {{ for(var i in it){ }}
                    <tr>
                        <td>{{=it[i].user_host}}</td>
                        <td>{{=it[i].msg_data}}</td>
                        <td>{{=it[i].msg_date}}</td>
                        {{? it[i].msg_usable == 0}}
                            <td><a onclick="doMsg('{{=it[i].id}}')">处理</a></td>
                        {{??}}
                            <td>已处理</td>
                        {{?}}
                    </tr>
                {{ } }}
            </script>
        </table>
    </div>
</div>

JavaScript代码：

//定义初始页面
var msgCurPage=1;
//首次获取消息列表
getMsgList(msgCurPage);

//滚动加载更多
$('.msg-box .set-scrollbar').scroll(function(){
    var scrollTop =$(this).scrollTop();
    var thisH = $(this).height();
    var tableH = $(this).find('table').height();
    if(tableH - thisH - scrollTop <= 0){
        msgCurPage++;
        getMsgList(msgCurPage);
    }
})

//获取更多消息列表
function getMsgList(msgCurPage){
    $('.msg-box .msg-list .loading').text('加载中...');
    ajax(URL,'msg','list',{
        t : token,
        page : msgCurPage,
        size : 10
    },function(r){
        if(r.code == 200){
            if(r.data.length>0){
                $('.msg-box .msg-list .loading').show();
                setTimeout(function(){
                    var box = doT.template(document.querySelector("#msgListTmp").innerText);
                    document.querySelector("#msgList").innerHTML = document.querySelector("#msgList").innerHTML + box(r.data);
                    $('.msg-box .msg-list .loading').hide();
                },1000)
            }else{
                $('.msg-box .msg-list .loading').text('没有更多消息了！').show();
                setTimeout(function(){
                    $('.msg-box .msg-list .loading').hide();
                },1000)
            }
        }else{
            $.fkTip(r.msg);
        }
    })
}