需求：在APP落地頁上的底部位置顯示此前其他用戶的購買記錄，要求此div盒子只顯示3條半，但一頁有10條，div內(nèi)的滑動(dòng)條滑到一頁底部自動(dòng)加載下一頁并發(fā)加載埋點(diǎn)。

 

實(shí)現(xiàn)：首先理解三個(gè)概念，分別是contentH，viewH，scrollTop。

contentH:即所要滑動(dòng)的元素內(nèi)容的高度，包括可見部分以及滾動(dòng)條下面的不可見部分。

ViewH:即我們看到的這個(gè)DIV的高度，不包括可見部分也不包括滾動(dòng)條下面的不可見部分。

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

故可實(shí)現(xiàn)如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$.ajax({
    type: "get",
    url: "record.json",//測試用假數(shù)據(jù)
    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都發(fā)送第一頁埋點(diǎn)
        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);//需要顯示的總頁數(shù)
                if (viewH + scrollTop == contentH && load <= pages) {
                    if (load * 10 < showLength) {
                        load_records(origin++ * 10, load++ * 10);//加載下一頁的10條數(shù)據(jù)
                        hxmClickStat('mar_all_207_ssjk.goumai.load.' + origin, {url_ver: "SJCGBS-10030"});//滑動(dòng)到底部開始加載下一頁時(shí)發(fā)送埋點(diǎn)
                    } else {
                        load_records(origin * 10, showLength);//加載最后一頁
                        hxmScrollBottomStat('mar_all_207_ssjk.goumai.bottom', {url_ver: "SJCGBS-10030"});//最后一頁發(fā)送埋點(diǎn)
                        load++;//避免重復(fù)執(zhí)行
                    }
                }
            });
        }
        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!');
    }
});

 　　以上方法在蘋果手機(jī)瀏覽器中會(huì)達(dá)不到預(yù)期效果，解決方法及代碼改進(jìn)

將觸底判斷條件更改為

+ View Code

 

　　究其原因，故在滾動(dòng)時(shí)將scrollTop和viewH、contentH分別打印出來，滑到底部的時(shí)候發(fā)現(xiàn)他們有1個(gè)單位的誤差，可能是因?yàn)槟承ヾiv元素的高度不為整數(shù)而js在判斷的時(shí)候直接將其取整了，故可以選擇將其加1。

也可以使用另一種方式百分比的判斷條件來實(shí)現(xiàn)：在滾動(dòng)條距離底端2%以內(nèi)：scrollTop / (contentH– viewH) >= 0.98。

或者使用絕對數(shù)值范圍來實(shí)現(xiàn)，滾動(dòng)條距離底端30px以內(nèi)：contentH – viewH – scrollTop <= 30。