下拉加載更多內容(滾動加載)


  最近寫項目,要求實現滾動條滾動到底部的時候請求加載更多的數據。要實現此功能首先想到的就是scroll事件,經過查閱資料終於實現此功能,具體原理如下:

首先需要給div加scroll事件,監聽滾動條滾動動作。滾動加載的原理:當滾動條的高度加上 滾動條到div頂部的高度 等於div的可滾動高度時,說明滾動條到底部了,此時便可以觸發向服務端請求數據的ajax請求了。

  判斷滾動條是否滾動到底部:

this.scrollHeight<=$(this).scrollTop()+$(this).height();

注:如果等滾動條滾動到底部時再加載,會影響用戶的體驗。因為一般動態加載的時候都需要向服務端請求資源,這時需要時間。一個更佳的方式是:當滾動條距離底部一定距離(C)時,就開始動態加載即向服務器請求資源。也就是預加載,預讀取。代碼即:

this.scrollHeight-C ==$(this).scrollTop()+$(this).height();

完整的滾動加載代碼即:

$("滾動區域ID").unbind("scroll").bind("scroll", function(e){  
     var sum = this.scrollHeight;  
     if (sum <= $(this).scrollTop() + $(this).height()) {  
        $.ajax({獲取數據的邏輯代碼})
      }  
 });

注:該方法在使用之前首先需要引入jQuery.js;

$(this).unbind('scroll').bind('scroll',function(){})這樣寫是為了避免重復綁定。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM