html 結構 script部分 ...
html 結構
<div id="main"> <ul class="order-list" id="list_box"> // li </ul>
<div id="getmore">
正在載入。。。
</div>
</div>
script部分
var page = 1, //分頁碼 off_on = false, //分頁開關 timers = null; //定時器 var p = 0, t = 0; //載入數據 var LoadingDataFn = function () { $("#getmore").show() var dom = ''; for (var i = 0; i < 20; i++) { dom += '<li>'+i+'</li>'; } $("#getmore").hide() $('#list_box').append(dom); off_on = true; }; //初始化, 第一次載入 $(document).ready(function () { LoadingDataFn(); }); $(window).scroll(function () { //當時滾動條離底部60px時開始載入下一頁的內容 p = $(this).scrollTop(); if (t <= p) {//下滾 // if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) { clearTimeout(timers); timers = setTimeout(function () { page++; console.log("第" + page + "頁"); LoadingDataFn() }, 300); } } else {//上滾 // } setTimeout(function () { t = p; }, 0); });