<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 20px;
}
.ad{
overflow: auto;
width: 200px;
border: 1px solid #979797;
height: 300px;
}
</style>
</head>
<body>
<div class="ad" onscroll="add(this)"></div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
let arr = [1, 2, 3, 65, 5, 8, 854, 64, 64, 654, 654, 6847, 87, 4987, 9684, 5, 4132, 15, 468, 4684, 64, 35, 21, 2, 21, 31, 1, 1, 1, 1, 11, 1, 4, 4, 4, 5, 5, 5, 89, 8, 8, 8, 7, 7987, 97, 987, 64, 63, 4131, 31, 64, 64, 987, 8697, 687, 64, 4, 345, 35, 135, 151, 4]
var inita = []
var group = 20;//将数组分成一小组20个
for (var i = 0, j = arr.length; i < j; i += group) {
inita.push(arr.slice(i, i + group));
}
function init(arr) {
for (let i = 0; i < arr.length; i++) {
var html = $(`<div>${arr[i]}</div>`)
$('.ad').append(html)
}
}
init(inita[0])
var a = 1
console.log(inita.length);
var nDivHight = $(".ad").height();
var nScrollHight = 0
var nScrollTop =0
function add(params) {
nScrollHight = $(params)[0].scrollHeight;
nScrollTop = $(params).scrollTop();
console.log(nScrollHight);
console.log(nScrollTop);
console.log(nDivHight);
if(nScrollTop + nDivHight >= nScrollHight){
console.log('到底了');
if(a<inita.length){
init(inita[a])
a++
}
}
}
</script>
</body>
</html>
滚动条滚动到底部是加载数据(数据分段加载)
最新推荐文章于 2024-04-08 09:07:22 发布
关键词由CSDN通过智能技术生成