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!');  }});