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

我試着用jquery來實作這個功能。先要得到滾動條的總長屬性值：scrollHeight，還有滾動條目前位置屬性值：scrollTop。然後通過計算，若目前值位于總長值三分之二時加載新資料。假設DOM上有一個元素為<div

id=”mypage”></div>，該元素overflow樣式為scroll，也就是元素中的内容溢出元素指定高度時啟用滾動條。利用jquery的load方法為元素加載一個已經存在的檔案，我假設它是table.html。這個檔案的内容可以是足以使浏覽器滾屏的一張資料表。

<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);