原生上滑加载

最新推荐文章于 2024-02-01 09:43:25 发布

OldStreet.

最新推荐文章于 2024-02-01 09:43:25 发布

阅读量246

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_58633408/article/details/125483746

版权

首先说一下涉及到的前置js知识点：三个dom属性.

1.clientHeight：不包含边框的元素可视区域高度。
2.scrollTop：元素滚动时卷上去的距离。
3:scrollHeight:元素实际高度，包含卷上去的高度。
知道了上述三个属性后，就知道了一个公式：

当元素的可视高度+滚入的距离>=元素真实高度-触底距离时,触发加载更多（scrollTop +clientHeight ）> scrollHeight - 50；

**然后就是上拉加载的原理:

通过监听元素的滚动事件(scroll)判断元素是否滚动到了距离底部指定距离时触发加载数据

知道了原理和三者之间的关系后,我们就知道只需要判断这个公式即可知道滚动条有没有进入触底距离,话不多说show code~**

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
 
        .container {
            height: 100vh;
            overflow-y: scroll;
        }
 
        .container .list {
            border: 1px solid #666;
        }
 
        .container .list li {
            line-height: 80px;
        }
 
        .container .list li:nth-child(2n) {
            background-color: #ccc;
        }
    </style>
</head>
 
<body>
    <section class="container">
        <section class="list">
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
            <li>我是内容</li>
        </section>
    </section>
</body>
<script type="text/javascript" defer="defer">
    // 滚动容器
    const container = document.querySelector('.container');
    // 监听滚动事件
    container.addEventListener('scroll', _.debounce(function (e) {
        // 当元素的可视高度+滚入的距离>=元素真实高度-触底距离时,触发加载更多
        if ((this.clientHeight + this.scrollTop) >= this.scrollHeight - 50) {
            setTimeout(() => {
                // 这里是一个异步加载数据的操作
                console.log('加载更多')
            }, 1000);
        }
    }, 700))
</script>
 
</html>