jquery滚动条底部自动加载

时间:2022-03-24 20:34:52
$(function(){
var totalHeight = 0; //定义一个总高度变量
function ata(){ //loa动态加载数据
totalHeight = parseFloat( $(window).height() ) + parseFloat( $(window).scrollTop() ); //浏览器的高度加上滚动条的高度
if ( $(document).height() <= totalHeight ) { //当文档的高度小于或者等于总的高度时,开始动态加载数据
$("#container").append("<p>我是新加载出来的数据</p>"); //加载数据
}
}
$(window).scroll(function(){
console.log("滚动条到顶部的垂直高度:" + $(window).scrollTop() );
console.log("页面的文档高度:" + $(document).height() );
console.log("浏览器的高度:" + $(window).height() );
ata();
})
})
1 <body>
<div id="pa">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>4</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>111</p>
</div>
2     <div id="container"></div> //加载数据的位置
3 </body>