The following scrolling effect is found on the web.
Load data from the background asynchronously when the scroll bar is over the top (the page exceeds the height of the window)
<%@ 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 ">
<title> scrolling Load Database data </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; Distance below boundary length/unit px
var elemt = 500; Insert element height/unit px
var maxnum = 20; Set Maximum load times
var num = 1;
var totalheight = 0;
var main = $ ("#content"); Principal element
$ (window). Scroll (function () {
var Srollpos = $ (window). scrolltop (); scroll bar distance from top (page exceeds height of window)
Totalheight = parsefloat ($ (window). Height ()) + parsefloat (srollpos);
if ((document). Height ()-range) <= totalheight && num!= maxnum) {
$.ajax ({
URL: ".. /demo/handlerdemo.ashx ",//the method page showing the data
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>"; IDs and Event-mapped fields for the database
});
varhtml = "</ul>";
Main.append ("<div style= ' border:0px solid Tomato;margin-top:20px;color: #ac" + (num%) + (num%) + "; Height:" + El EMT + "' >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>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Content" style= "height:960px" >
<div id= "Follow" >this is a scroll test;<br/> page drop-down auto load content </div>
<div style= ' border:1px solid tomato;margin-top:20px;color: #ac1; height:800 ' >hello World Test div</div>
</div>
</form>
</body>
