浏览器滚动条快到底部时自动加载数据
2015-11-30 14:29
357 查看
<!DOCTYPE html> <html> <head> <script src="jquery-1.8.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var range = 50; //距下边界长度/单位px var elemt = 40; //插入元素高度/单位px var maxnum = 30; //设置加载最多次数 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() - totalheight) <= range && num != maxnum) {//页面底部与滚动条底部的距离<range main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>"); 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>
来源:http://www.cnblogs.com/Fly-sky/p/4026748.html
相关文章推荐
- 关于centos7的网卡命名
- eclipse远程连接hadoop-笔记2
- OC桥接转换
- 几种计算机语言的评价
- Learn Lua in 15 Minutes
- Learn Lua in 15 Minutes
- 设计模式之--模板设计模式
- 图片的拉伸
- JavaScript 闭包
- oracle 非空闲等待事件排查
- SpringMvc快速入门
- JQ---表单验证(用户名、邮箱)
- centos6上redis搭建配置
- configure.ac范例一
- Tomacat7启动报错-org.apache.catalina.deploy.WebXml addFilter
- Git忽略规则及.gitignore规则不生效的解决办法
- TCP_UDP常见端口参考
- Android内存管理之LMK和OOM
- C语言_数组
- android:descendantFocusability用法简析