js当滚动条即将到达底部自动加载数据

王焜棟琦

于 2017-07-17 17:39:41 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.csdn.net/u011511086/article/details/75258205

js 专栏收录该内容

79 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的滚动加载更多功能的方法。通过监听滚动条的位置与可视区域的关系来判断是否需要加载更多内容。具体实现了当滚动条接近页面底部时自动触发加载更多数据的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
    $(window).scroll(function () {
        //下面这句主要是获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8
        var htmlHeight = $(document).height();  
        //clientHeight是网页在浏览器中的可视高度，
        var clientHeight = $(window).height(); 
        //scrollTop滚动条到顶部的垂直高度
        var scrollTop = $(document).scrollTop(); 
        //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容；
        var he = scrollTop + clientHeight;
        if (he >= htmlHeight * 0.9) {
            addListMore();
        }
        //console.log("滚动条位置：" + scrollTop);
        //console.log("可视高度：" + clientHeight);
        //console.log("网页总高度" + htmlHeight);
    });
    function addListMore() {
        console.log("加载更多");
    }
</script>