jquery在瀏覽器滾動條上的應用

Google閱讀器上有一個AJAX效果很不錯，就是閱讀專案時不需要翻頁，瀏覽器滾動條往下拉到一定位置時自動載入新的一批專案進來，一直到所有專案載入完為止。對於我來說再好不過了，因為我很不喜歡翻頁，尤其是輸入頁碼再定位到頁。要知道，資料量增加很頻繁時，要通過定位頁碼來找到目標資料似乎並沒有什麼意義。我覺得使用者體驗成熟的WEB應用程式應當引導使用者使用TAG或搜尋等功能來找到目標資料。至於瀏覽資料，尤其是瀏覽最新的資料，利用瀏覽器滾動條來載入，是很好的嘗試……

我試著用jquery來實現這個功能。先要得到滾動條的總長屬性值：scrollHeight，還有滾動條當前位置屬性值：scrollTop。然後通過計算，若當前值位於總長值三分之二時載入新資料。假設DOM上有一個元素為<div
id=”mypage”></div>，該元素overflow樣式為scroll，也就是元素中的內容溢位元素指定高度時啟用滾動條。利用jquery的load方法為元素載入一個已經存在的檔案，我假設它是table.html。這個檔案的內容可以是足以使瀏覽器滾屏的一張資料表。

<script type=”text/javascript” src=”jquery.js“>//載入jquery庫</script>
<script
type=”text/javascript”>

var hght=0;//初始化滾動條總長
var
top=0;//初始化滾動條的當前位置
$(document).ready(function(){//DOM的onload事件
 
$(”#mypage”).load(”table.html”);//table.html的內容被載入到mypage元素

  $(”#mypage”).scroll( function() {//定義滾動條位置改變時觸發的事件。
   
hght=this.scrollHeight;//得到滾動條總長，賦給hght變數
   
top=this.scrollTop;//得到滾動條當前值，賦給top變數
  });
});

setInterval(”cando();”,2000);//每隔2秒鐘呼叫一次cando函式來判斷當前滾動條位置。

function cando(){
 
if(top>parseInt(hght/3)*2)//判斷滾動條當前位置是否超過總長的2/3，parseInt為取整函式
   
show();//如果是，呼叫show函式載入內容。
}

function show(){
  $.get(”table.html”,
function(data){//利用jquery的get方法得到table.html內容
   
$(”#mypage”).append(data);//用append方法追加內容到mypage元素。
   
hght=0;//恢復滾動條總長，因為$(”#mypage”).scroll事件一觸發，又會得到新值，不恢復的話可能會造成判斷錯誤而再次載入……
   
top=0;//原因同上。
  });
}

</script>
<div id=”mypage”></div>

為什麼要隔2秒鐘呼叫一次判斷呢？因為只要$(”#mypage”).scroll事件一被觸發，就會影hght和top值，這個值可能總是滿足cando函式的判斷，也就是top值總是位於hght的三分之二。因此可能會多次載入造成伺服器負擔加重。而每載入一次後把hght和top值賦0，也是這個原因。

這段程式碼的效果就是隻要元素mypage的滾動條位置位於滾動條總長的三分之二時，追加table.html的內容到元素mypage中去。當然這樣執行是無休止地載入下去。在真正的AJAX運用中，table.html可以換成asp或php指令碼，接收get或post引數來進行處理，然後返回有意義的資料。jquery的get方法可以設定get方式的引數資料，比如：

$.get(”test.php”, { name: “boho”, id: “1″ } );

相當於http://hostlocal/test.php?name=boho&id=1這種形式的http訪問。然後通過get方法的回撥函式來獲取test.php輸出的內容：

$.get(”test.php”, {name:”boho”,id:”1″},function(data){
  alert(”Data
Loaded: ” + data);
});