最近寫項目,要求實現滾動條滾動到底部的時候請求加載更多的數據。要實現此功能首先想到的就是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(){})這樣寫是為了避免重復綁定。