js +Ajax 实现滚动条自动加载内容
2017-08-17 17:34
183 查看
<!DOCTYPE=html> <html> <head> <script src="./js/jquery-3.2.1.min.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) {
/*******************
//这里可以写自己的ajax代码,实现自己想要的
//效果/*******************/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++; }a3dd}); }); </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' >JS + Ajax 自动加载</div></div></body></html>
相关文章推荐
- javscript实现滚动条滚动到页面底部自动加载增加页面内容
- 当滚动条滚动到页面底部自动加载增加内容的js代码
- js代码:实现主页面滚动条随iframe里的内容自动调整
- 当滚动条滚动到页面底部自动加载增加内容的js代码
- 当滚动条滚动到页面底部自动加载增加内容的js代码
- 用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
- js实现滚动条到底自动加载图片
- 滚动条滑至底部自动加载内容
- js当滚动条即将到达底部自动加载数据
- js实现鼠标点击文本框自动选中内容的方法
- JS实现GridView式的数据加载(带滚动条)
- 实现Android ListView 自动加载更多内容
- 滚动条的监听与内容随着滚动条动态加载的实现
- jQuery结合ajax实现动态加载文本内容
- JS怎么控制IFRAME高度自动适应内容而不出现滚动条
- JS实现自动加载
- 实现Android ListView 自动加载更多内容
- 怎样使AJAX有利于SEO:为使用JS和AJAX动态加载的内容制定href
- js加载Json数组实现ajax加载动态页面数据
- Jquery的 scroll事件,实现当滚动条到达最底部时,自动加载新项