原文鏈接： http://www.cnblogs.com/w-wanglei/p/5863387.html
在手機端瀏覽網頁時，經常使用一個功能，當我們瀏覽京東或者淘寶時，頁面滑動到底部，我們看到數據自動加載到列表。之前並不知道這些功能是怎么實現的，於是自己在PC瀏覽器上模擬實現這樣的功能。先看看瀏覽效果：
當滾動條滾動到頁面底部時，提示“正在加載…”。
當頁面已經加載了所有數據后，滾動到頁面底部會提示“數據已加載到底了”：
實現數據無限加載的過程大致如下：
1.滾動條滾動到頁面底部。
2.觸發ajax加載，把請求返回的數據加載到列表后面。
如何判斷滾動條是否滾動到頁面底部？我們可以設置一個規則：當滾動條的滾動高度和整個文檔高度相差不到20像素，則認為滾動條滾動到頁面底部了：
文檔高度 - 視口高度 - 滾動條滾動高度 < 20
要通過代碼實現這樣的判斷，我們必須要了解上面的這些高度通過哪些代碼獲取？可以參考我之前寫的一篇“HTML元素坐標定位，這些知識點得掌握”。
上面的判斷，我封裝了一個方法：
//檢測滾動條是否滾動到頁面底部 function isScrollToPageBottom(){ //文檔高度 var documentHeight = document.documentElement.offsetHeight; var viewPortHeight = getViewportSize().h; var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; return documentHeight - viewPortHeight - scrollHeight < 20; }
判斷有了，我們就可以開啟一個定時器，900毫秒監測一次，如果isScrollToPageBottom()返回true則調用ajax請求數據，如果返回false則通過900毫秒之后再監測。
下面是核心代碼實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無限分頁</title> <link rel="stylesheet" href="assets/css/index.css"/> </head> <body> <div class="l-page"> <ul id="list" class="list"> </ul> </div> <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script src="js/jquery.mockjax.js"></script> <script type="text/javascript" src="js/dataMock.js"></script> <script type="text/javascript"> //作為一個對象的w和h屬性返回視口的尺寸 function getViewportSize(w){ //使用指定的窗口， 如果不帶參數則使用當前窗口 w = w || window; //除了IE8及更早的版本以外，其他瀏覽器都能用 if(w.innerWidth != null) return {w: w.innerWidth, h: w.innerHeight}; //對標准模式下的IE（或任意瀏覽器） var d = w.document; if(document.compatMode == "CSS1Compat") return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight}; //對怪異模式下的瀏覽器 return {w: d.body.clientWidth, h: d.body.clientHeight}; } //檢測滾動條是否滾動到頁面底部 function isScrollToPageBottom(){ //文檔高度 var documentHeight = document.documentElement.offsetHeight; var viewPortHeight = getViewportSize().h; var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; return documentHeight - viewPortHeight - scrollHeight < 20; } //商品模板 function getGoodsTemplate(goods){ return "<li>" + "<div class='pic-wrap leftFloat'>" + "<img src='" + goods.pic + "'>" + "</div>" + "<div class='info-wrap leftFloat'>" + "<div class='info-name'><span>" + goods.name + "</span></div>" + "<div class='info-address'><span>" + goods.address +"</span></div>" + "<div class='info-bottom'>" + "<div class='info-price leftFloat'><span>￥" + goods.price + "</span></div>" + "<div class='info-star leftFloat'><span>" + goods.star + "人推薦</span></div>" + "<div class='info-more leftFloat'><span>更多信息</span></div>" + "</div>" + "</div>" + "</li>"; } //