div滚动到底部后再加载其他内容

最新推荐文章于 2024-04-28 16:24:30 发布

jojo付啾啾

最新推荐文章于 2024-04-28 16:24:30 发布

阅读量2.2k

点赞数 1

分类专栏： JS 文章标签： div滚动到底部后再加载其他内容

本文链接：https://blog.csdn.net/DreamFJ/article/details/81562071

版权

JS 专栏收录该内容

116 篇文章 1 订阅

订阅专栏

思路：同前面判断网页滚动到底部的方法一样，如果div的可视高度+卷起高度>=div.scrollHeight，则到底部了，可以加载新的内容了。

代码：

<!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>div滚动到底部加载</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin: 20px auto;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div id="test">
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <script>
        window.onload = function() {
            var test = document.getElementById("test");
            test.onscroll = function() {
                // 注意这里不能用style.height，因为style.height获取的是标签里的style的height，如果标签里没有设置height，那么就获取不到。
                // style属性的最大作用是用来设置css属性而不是获取css属性。获取样式使用getComputedStyle。
                var clientH = test.clientHeight;
                var scrollT = test.scrollTop;
                var wholeH = test.scrollHeight;
                if (clientH + scrollT >= wholeH) {
                    alert("到div底部啦");
                }
            };
        };
    </script>
</body>

</html>