页面滚动动态加载数据，页面下拉自动加载内容

最新推荐文章于 2021-06-03 14:22:48 发布

weixin_30437481

最新推荐文章于 2021-06-03 14:22:48 发布

阅读量73

点赞数

原文链接：http://www.cnblogs.com/sunnywindycloudy/p/7388469.html

版权

原文地址：http://blog.csdn.net/saindy5828/article/details/7756315

<!DOCTYPE=html>
 <html>
 <head>
 <script src="js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
 $(document).ready(function(){
 var range = 50; //距下边界长度/单位px
 var elemt = 500; //插入元素高度/单位px
 var maxnum = 20; //设置加载最多次数
 var num = 1;
 var totalheight = 0;
 var main = $("#content"); //主体元素
 $(window).scroll(function(){
 var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)

//console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
 //console.log("页面的文档高度 ："+$(document).height());
 //console.log('浏览器的高度：'+$(window).height());

totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
 if(($(document).height()-range) <= totalheight && num != maxnum) {
 main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");
 num++;
 }
 });
 });
 </script>
 </head>
 <body>
 <div id="content" style="height:960px">
 <div id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</div>
 <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>

</div>
 </body>
 </html>

转载于:https://www.cnblogs.com/sunnywindycloudy/p/7388469.html

weixin_30437481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面滚动动态加载数据，页面下拉自动加载内容

原文地址：http://blog.csdn.net/saindy5828/article/details/7756315<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="text/javascript"></script>&l...
复制链接

扫一扫