快捷導(dǎo)航

scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示(zepto.js)

更新時(shí)間：2016年12月18日 17:11:42 作者：陽(yáng)冰

這篇文章主要為大家詳細(xì)介紹了scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

需求：在APP落地頁(yè)上的底部位置顯示此前其他用戶的購(gòu)買記錄，要求此div盒子只顯示3條半，但一頁(yè)有10條，div內(nèi)的滑動(dòng)條滑到一頁(yè)底部自動(dòng)加載下一頁(yè)并發(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)的長(zhǎng)度。當(dāng)滑動(dòng)條拉到底部的時(shí)候,contentH=viewH+scrollTop。

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

$.ajax({
  type: "get",
  url: "record.json",//測(cè)試用假數(shù)據(jù)
  dataType: "json",
  success: function (records) {
    var showLength = records.data.length;//需要顯示的總長(zhǎng)度
    var flag = showLength <= 10 ? showLength : 10;
    load_records(0, flag);//開始加載第一頁(yè)
    hxmClickStat('mar_all_207_ssjk.goumai.load.' + 1, {url_ver: "SJCGBS-10030"});//不論長(zhǎng)度是否超過10都發(fā)送第一頁(yè)埋點(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);//需要顯示的總頁(yè)數(shù)
        if (viewH + scrollTop == contentH && load <= pages) {
          if (load * 10 < showLength) {
            load_records(origin++ * 10, load++ * 10);//加載下一頁(yè)的10條數(shù)據(jù)
            hxmClickStat('mar_all_207_ssjk.goumai.load.' + origin, {url_ver: "SJCGBS-10030"});//滑動(dòng)到底部開始加載下一頁(yè)時(shí)發(fā)送埋點(diǎn)
          } else {
            load_records(origin * 10, showLength);//加載最后一頁(yè)
            hxmScrollBottomStat('mar_all_207_ssjk.goumai.bottom', {url_ver: "SJCGBS-10030"});//最后一頁(yè)發(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">購(gòu)買成功</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');//插入一條購(gòu)買記錄
      }
    }
  },
  error: function () {
    console.log('some errors happened!');
  }
});

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

將觸底判斷條件更改為

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

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: