转自：Jquery网页滚动条滚动到最下面自动加载下一页
<head> <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> //（假设网速超快加载数据又很少，网页可以在瞬间或者1、2秒内就可以加载完成） <script type="text/javascript"> var isNoData = 0;//服务器还有数据可加载，就是还没到最后一页 var isDone = 1; //网页是否在加载完成 1表示已经加载完成 var page_index = 0; //当前加载页数 打开网页时默认为0，就是第一页 window.onload = function () { $(window).scroll(function () { if (isNoData == 0) {//还不是最后一页数据 var pageH = $(document.body).outerHeight(true); //整个网页高度 var winH = $(window).height(); //页面可视区域高度 var scrollT = $(window).scrollTop(); //滚动条top if (pageH - winH - scrollT - 10 <= 0.5) {//滚动到哪个位置触发加载事件，在这里设置 if (isDone == 1) { page_index++; isDone = 0; ShowData(page_index,参数2, 参数3, ....); setTimeout('Delay()', 2000); //延时2秒 } } } }); } //用于延时触发加载下一页，当滚动条到最下方时 正在加载下一页同时滚动条又在拉动 可能会引起瞬间再次向后台发送加载下一页的请求,延时一下解决这问题 function Delay() { isDone = 1; } function ShowData(page_index,参数2, 参数3,.....) { $.ajax({ url: 'Main.aspx', type: 'Post', data: { "page_index": page_index, "参数2": 参数2, "参数3": 参数3 }, success: function (msg) { $('#div1').append(msg); } }); } </script> </head> <body> <div id="div1"></div> </body>
--------------------------分割线------------------
下面是div中的滚动条拉到div最下端触发加载下一页，替换上面的$(window).scroll()事件就可以了
$("#div1").scroll(function () { if (isDone == 1) { //var winH = $(window).height(); //页面可视区域高度 var div1_H = $('#div1').outerHeight(true); var scrollTHight = $(this)[0].scrollHeight; //滚动距离总长(注意不是滚动条的长度) var scrollT = $(this)[0].scrollTop; //滚动到的当前位置 if (scrollT + div1_H >= scrollTHight-2) { page_index++; isDone = 0; ShowData(txtHLSearch, adsType, txtAds_id, page_index); setTimeout('Delay()', 2000); //延时2秒 } } });
