滾動條加載功能實現(懶加載)

　　通過滾動條實現數據逐條展示，優點顯而易見，對於大量數據而已，不僅可以緩解服務器壓力，並且能更快更友好的展現到客戶端。

代碼實現

<script>
    var num = 1;
    $("#ShowPanal").scroll(function () {
        var h = $(this).height();//div可視區域的高度
        var sh = $(this)[0].scrollHeight;//滾動的高度，$(this)指代jQuery對象，而$(this)[0]指代的是dom節點
        var st = $(this)[0].scrollTop;//滾動條的高度，即滾動條的當前位置到div頂部的距離
        //上面的代碼是判斷滾動條滑到底部的代碼
        if (h + st >= sh) {
            //暫停滾動
            $(this)[0].disabled = false;
            num = num + 7;
            $("#dataPanal").append("新內容");
            //啟用滾動
            $(this)[0].disabled = true;
        }
    })
</script>
<div id="ShowPanal" style="margin:5px">
　　<table class="re_table" border="1px" style="border: 1px solid #dddddd; width: 100%">
        <tr class="grey_bg" style="background:#75b9e5;height:40px">
            <td rowspan="1" colspan="1" align="center" width="12%">編碼</td>
            <td rowspan="1" colspan="1" align="center" width="20%">名稱</td>
        </tr>
　　</table>
</div>
<div id="dataPanal">
</div>