1. <!DOCTYPE=html>
2. <html>
3. <head>
4. <script src="js/jquery.js" type="text/javascript"></script>
5.
6. <script type="text/javascript">
7. $(document).ready(function(){
8. var range = 50; //距下边界长度/单位px
9. var elemt = 500; //插入元素高度/单位px
10. var maxnum = 20; //设置加载最多次数
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()-range) <= totalheight && num != maxnum) {
23. 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. num++;
25. }
26. });
27. });
28. </script>
29. </head>
30. <body>
31. <div id="content" style="height:960px">
32. <div id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</div>
33. <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>
34.
35. </div>
36. </body>
37. </html>
页面下拉自动加载内容
最新推荐文章于 2024-03-20 18:11:59 发布