 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollLoadData.aspx.cs" Inherits="WebApplication1.ScrollLoadData" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>滾動(dòng)加載數(shù)據(jù)庫(kù)數(shù)據(jù)</title> 
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 

var range = 50; //距下邊界長(zhǎng)度/單位px 
var elemt = 500; //插入元素高度/單位px 
var maxnum = 20; //設(shè)置加載最多次數(shù) 
var num = 1; 
var totalheight = 0; 
var main = $("#content"); //主體元素 
$(window).scroll(function(){ 
var srollPos = $(window).scrollTop(); //滾動(dòng)條距頂部距離(頁(yè)面超出窗口的高度) 

totalheight = parseFloat($(window).height()) + parseFloat(srollPos); 
if (($(document).height() - range) <= totalheight && num != maxnum) { 
$.ajax({ 
url: "../demo/HandlerDemo.ashx",//顯示數(shù)據(jù)的方法頁(yè) 
type: "GET", 
data: "name=json", 
dataType: "json", 
//cache: false, 
success: function (data) { 
data = eval(data); 
var varHtml = ""; 
varHtml = "<ul>" 
$(data).each(function (i) { 
varHtml += "<li>" + data[i].ID + ":" + data[i].Event + "</li>"; //ID 和Event為數(shù)據(jù)庫(kù)映射的字段 
}); 
varHtml += "</ul>"; 
main.append("<div style='border:0px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "<br />"+varHtml + "---" + num + "</div>"); 
}, 
error: function () { 
alert("error"); 
} 

}); 

num++; 
} 
}); 
}); 
</script> 
<style type="text/css"> 
li 
{ 
list-style-type:none; 
float:left; 
padding-left:20px; 

} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="content" style="height:960px"> 
<div id="follow">this is a scroll test;<br/> 頁(yè)面下拉自動(dòng)加載內(nèi)容</div> 
<div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div> 
</div> 

</form> 
</body> 
</html> 