你的位置:首页 > Java教程

[Java教程]浏览器滚动条快到底部时自动加载数据


 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <script src="jquery-1.8.2.js" type="text/javascript"></script> 5  6   <script type="text/javascript"> 7     $(document).ready(function () { 8       var range = 50;       //距下边界长度/单位px 9       var elemt = 40;       //插入元素高度/单位px10       var maxnum = 30;      //设置加载最多次数11       var num = 1;12       var totalheight = 0;13       var main = $("#content");           //主体元素14       $(window).scroll(function () {15         var srollPos = $(window).scrollTop();  //滚动条距顶部距离(页面超出窗口的高度)16 17         //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());18         //console.log("页面的文档高度 :"+$(document).height());19         //console.log('浏览器的高度:'+$(window).height());20 21         totalheight = parseFloat($(window).height()) + parseFloat(srollPos);//滚动条当前位置距顶部距离+浏览器的高度22         if (($(document).height() - totalheight) <= range && num != maxnum) {//页面底部与滚动条底部的距离<range23           main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");24           main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");25           num++;26         }27       });28     });29   </script>30 </head>31 <body>32   <div id="content" style="height:960px">33     <div id="follow">this is a scroll test;<br />  页面下拉自动加载内容</div>34     <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800'>hello world test DIV</div>35 36   </div>37 </body>38 </html>

 

来源:http://www.cnblogs.com/Fly-sky/p/4026748.html