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

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

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

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

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

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

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

完整的滾動加載代碼即:code

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

注:該方法在使用以前首先須要引入jQuery.js;blog

$(this).unbind('scroll').bind('scroll',function(){})這樣寫是爲了不重複綁定。事件

相關文章
相關標籤/搜索