scroll事件實現監控捲軸並分頁顯示樣本（zepto.js）

標籤：滾動   length   需要   條件   避免   選擇   xms   事件   落地   

scroll事件實現監控捲軸並分頁顯示樣本(zepto.js  )

 

需求：在APP落地頁上的底部位置顯示此前其他使用者的購買記錄，要求此div盒子只顯示3條半，但一頁有10條，div內的滑動條滑到一頁底部自動載入下一頁並發載入埋點。

 

實現：首先理解三個概念，分別是contentH，viewH，scrollTop。

contentH:即所要滑動的元素內容的高度，包括可見部分以及捲軸下面的不可見部分。

ViewH:即我們看到的這個DIV的高度，不包括可見部分也不包括捲軸下面的不可見部分。

scrollTop:即捲軸距離頂部的距離，若scrollTop的值為0，則代表捲軸在最上面。拉動捲軸，從最上面到最下面，變化的是scrollTop的值。例：假如contentH的高度為2000，而這個DIV的高度只有300，那麼還有1700不可見，拉動捲軸到最底部，此時scrollTop為1700，所以這個1700也可以理解為捲軸可以滾動的長度。當滑動條拉到底部的時候，contentH=viewH+scrollTop。

故可實現如下：

$.ajax({    type: "get",    url: "record.json",//測試用假資料    dataType: "json",    success: function (records) {        var showLength = records.data.length;//需要顯示的總長度        var flag = showLength <= 10 ? showLength : 10;        load_records(0, flag);//開始載入第一頁        hxmClickStat(‘mar_all_207_ssjk.goumai.load.‘ + 1, {url_ver: "SJCGBS-10030"});//不論長度是否超過10都發送第一頁埋點        if (showLength > 10) {            var origin = 1, load = 2;            $(‘.records_body‘).scroll(function () {                var contentH = $(this).get(0).scrollHeight;                var viewH = $(‘.records_body‘).height();                var scrollTop = $(this).scrollTop();                var pages = Math.ceil(showLength / 10);//需要顯示的總頁數                if (viewH + scrollTop == contentH && load <= pages) {                    if (load * 10 < showLength) {                        load_records(origin++ * 10, load++ * 10);//載入下一頁的10條資料                        hxmClickStat(‘mar_all_207_ssjk.goumai.load.‘ + origin, {url_ver: "SJCGBS-10030"});//滑動到底部開始載入下一頁時發送埋點                    } else {                        load_records(origin * 10, showLength);//載入最後一頁                        hxmScrollBottomStat(‘mar_all_207_ssjk.goumai.bottom‘, {url_ver: "SJCGBS-10030"});//最後一頁發送埋點                        load++;//避免重複執行                    }                }            });        }        function load_records(start, end) {            for (var i = start; i < end; i++) {                var stime = records.data[i].time;                var accure_time = stime.slice(5, stime.length);                var record_html = ‘<div class="records_item"><img src=‘ + records.data[i].avatar + ‘ class="avatar"/><div class="buyer_info"><p class="buyer_name">‘ + records.data[i].account + ‘</p><p class="status_title">購買成功</p></div>\n\<‘ +                    ‘div class="buyer_address"><p class="buy_address">‘ + records.data[i].city + ‘ IP:‘ + records.data[i].ip + ‘</p>\n\<‘ +                    ‘p class="buy_time">‘ + accure_time + ‘</p></div></div>‘;                $(record_html).appendTo(‘.records_body‘);//插入一條購買記錄            }        }    },    error: function () {        console.log(‘some errors happened!‘);    }});

 　　以上方法在蘋果手機瀏覽器中會達不到預期效果，解決方案及代碼改進

將觸底判斷條件更改為

if (viewH + scrollTop +1>= contentH && load <= pages)

 

　　究其原因，故在滾動時將scrollTop和viewH、contentH分別列印出來，滑到底部的時候發現他們有1個單位的誤差，可能是因為某些div元素的高度不為整數而js在判斷的時候直接將其取整了，故可以選擇將其加1。

也可以使用另一種方式百分比的判斷條件來實現：在捲軸距離底端2%以內：scrollTop / (contentH– viewH) >= 0.98。

或者使用絕對數值範圍來實現，捲軸距離底端30px以內：contentH – viewH – scrollTop <= 30。

 

scroll事件實現監控捲軸並分頁顯示樣本（zepto.js）