滾動條分頁/滾動條事件觸發

使用jquery架構實作滾動條分頁/滾動條事件觸發，簡單明了

//滾動條事件 record-dataTable-tbody是被滾動的标簽的ID，可以是div,table,table裡面的tbody等
$("#record-dataTable-tbody").scroll(function(){
	//滾動條位置
	var scrollTop = $("#record-dataTable-tbody").scrollTop();
	//可視視窗的高度
	var viewportHeight = $("#record-dataTable-tbody").height();
	//整個頁面可以滾動的高度
	var scrollHeight = $("#record-dataTable-tbody")[0].scrollHeight;
	//“如果滾動條的位置”+“可視視窗的高度”=“整個頁面可以滾動的高度”，那麼就調用相應的函數加載資料
	if(scrollTop+viewportHeight==scrollHeight){
		//模仿資料加載函數 動态給table裡面的tbody添加行
		var htmll="";
		for(var i=0;i<5;i++){
			htmll+="<tr ><td >"+(i+1)+"</td>"
        		+"<td >11</td>" 
        		+"<td >22</td>"
        		+"<td >33</td>"
        		+"<td >44</td>"
        		+"<td >55</td>"
        		+"<td  >66</td>"
        		+"<td  >77</td>"
        		+"<td  >88</td>"
        		+"<td  >99</td>"
        		+"<td  >22</td>"
        		+"<td  >33</td>"
        		+"<td  >44</td>"
        		+"<td  >55</td></tr>"
			}
		$("#record-dataTable-tbody").append(htmll);
	}
});
           

有一個地方：

var scrollHeight = $("#record-dataTable-tbody")[0].scrollHeight;
           

這麼取的原因是jQuery封裝的對象是數組，再就是jQuery沒有 scrollHeight() 方法