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

代碼實現

<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>

?

轉載于:https://www.cnblogs.com/hjxh/p/7795779.html

總結

以上是生活随笔為你收集整理的滚动条加载功能实现(懒加载)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。