滚动条滚动到底部是加载数据（数据分段加载）

最新推荐文章于 2024-04-08 09:07:22 发布

ling…

最新推荐文章于 2024-04-08 09:07:22 发布

阅读量316

点赞数

本文链接：https://blog.csdn.net/chai_tian/article/details/121626271

版权

JavaScript 数组分割滚动加载动态广告 DOM操作

关键词由CSDN通过智能技术生成

<!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>

ling…

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
滚动条滚动到底部是加载数据（数据分段加载）

<!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>D.
复制链接

扫一扫