DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> scroll事件實現監控滾動條並分頁顯示(zepto.js)
scroll事件實現監控滾動條並分頁顯示(zepto.js)
編輯:關於JavaScript     

需求:在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。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved