这里是普通文章模块栏目内容页
google reader滚动动态加载数据实现方式
页面引用jquery及插件jquery-1.2.6.pack.js,jquery.dimensions.pack.js 

为承载数据的div增加onscroll事件:

在AddMoreData()方法中判断滚动条是否到达底部,若是,则异步传输数据

function AddMoreData(){

var myDiv = $("#dvBody")[0];

// alert( $("#dvBody")[0]);

if (  myDiv.scrollTop + myDiv.style.pixelHeight > myDiv.scrollHeight ){

     lastPostFunc(); //异步加载数据

}

}

var hasReturn = true; //指示当目前异步请求返回之后才可以进行下一次的异步传输,不然可能会出现数据不一致的情况

function lastPostFunc()

{

if ( ! hasReturn ) return;

hasReturn = false; //开始本次传输

//传输查询条件

var queryStr = document.location.search;

//因要获取上次滚动所达元素,以便在数据中取出此记录以下的数据,故须要在页面中用一hidden元素存起每次的最后的记录ID,并传给查询数据内

var url = "data.aspx" + queryStr + "&lastID=" +  $("#LastID").val() + "&sn="+$(".sn:last").attr("id");

url = url + "&txtCustomerName=" + $("#txtCustomerName").val();

url = url + "&txtTel=" + $("#txtTel").val();

url = url + "&ddlCustomerTypeSelectedValue=" + $("#ddlCustomerType").val();

url = url + "&ddlCommunicateStatusSelectedValue=" + $("#ddlCommunicateStatus").val();

url = url + "&txtOrderDate_begin=" + $("#txtOrderDate_begin").val();

url = url + "&txtOrderDate_end=" + $("#txtOrderDate_end").val();

//alert(url);

$('div#lastPostsLoader').html('bigLoader.gif'); //用id为lastPostsLoader的div加载等待图片

$.post(url,

 function(data){

 //alert($(".wrdLatest:last").attr("id"));

 if (data != "") {

 $(".wrdLatest1:last").after(data); //回调函数,将查询到的新数量加到:class为wrdLatest1的集合的最后一个元素之后,故在得到的数据中要生//成classclass为wrdLatest1的元素,以定位最后一个。

   }

 $('div#lastPostsLoader').empty();

 

 hasReturn = true; //本次传输完毕,可以进行下一次异步传输

});

};