页面无限滚动实现原理

作者: 健健康康 | 来源:发表于2020-01-06 19:38 被阅读0次

页面无限滚动实现原理
微信小程序实现一键返回顶部
JS - 单页面无限加载页面
pc端 jQuery实现导航悬浮
微信小程序scroll-view实现滚动卡片
JS开发之上拉加载更多
carousel
页面滚动和页面无缝滚动
无限循环滚动控件的思路
无限滚动与分页设计

前端无限滚动一般指元素滚动到最后，动态加载更多数据。实现原理大只如下：
假设outer为外层容器，则当滚动条滚动到最低端时

outer.scrollHeight  = outer.scrollTop + outer.offsetHeight；

我们希望滚动到快到底部时触发加载，可以为outer添加滚动监听，当差值小于10像素时加载新数据, 其中注意滚动到小于10像素后会连续多次触发滚动事件，所以注意事件的节流处理（一个函数未执行完不再执行第二次），以下是一个简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            overflow: auto;
        }
        #item{
            height: 400px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="item"></div>
    </div>
</body>
<script type="text/javascript">
    document.getElementById('box').addEventListener('scroll', function() {
        if (!this.delay) {
            this.delay = true;
            const st = setTimeout(() => {
                this.scrollTop + this.offsetHeight -10 > this.scrollHeight;
                const item = document.createElement('div');
                item.id = 'item';
                this.appendChild(item);
                this.delay = false;
                clearTimeout(st);
            }, 1000);
        }
    }, false);
</script>
</html>