JQ-滚动条下拉无限的加载数据

一、原理

　　利用滚动的高度，如果滚动的高度到达一定范围，就加载数据

二、实现

　　利用$(document.body).outerWidth()获取的是屏幕的高度，这个是固定的，不变的

　　利用$(window).scrollTop()获取您滚动的高度

　　利用$(document).height()获取总的高度　

　　注：$(widnow).height()这个是可视区的高度，这个跟$(document).height()很容易混淆

三、上代码

<section>
　　<div id="tishi">
　　　　<p>this is a scroll test;</p>
　　　　<p>页面下拉自动加载内容</p>
　　</div>
　　<div id="main">
　　　　<p>hello world test DIV</p>
　　</div>
</section>

$(function(){
　　$(window).scroll(function(){
　　　　if($(window).scrollTop() > $(document.body).outerWidth() - $('#tishi').height()){
　　　　　　var s='<p class="load">我可以无限制的加载...</p>';
　　　　　　$('#main').append(s);
　　　　}
　　})
})

转载于:https://www.cnblogs.com/xiaoyangtian/p/8030460.html

• 点赞
• 收藏
• 分享
• 文章举报