JQuery简单下拉加载

最新推荐文章于 2024-07-12 08:49:54 发布

Neokekeke

最新推荐文章于 2024-07-12 08:49:54 发布

阅读量751

点赞数

分类专栏：前端开发文章标签： jquery 下拉加载

本文链接：https://blog.csdn.net/neokekeke/article/details/79025548

版权

前端开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

用jquery简单实现下拉加载功能，主要确认几个点，window的高度，window滚动条到顶部的距离，document文档滚动条到顶部的距离。
条件：

（window的高度+window滚动条到顶部的距离）>=document文档滚动条到顶部的距离

加载下面数据


//HTML
    <div>下拉加载更多...</div>
    <div id="main" style="height: 1000px">
    <div id="d1" style="width: 100%;
                        height: 100px;
                        background-color: aquamarine">
    </div>
        <div id="d2" style="height: 100px;
                            background-color: #ff0000;
                            display: none">
        </div>
    </div>


//jq

    $(function(){
        var num = 0;
        var page = 1;
        //var d2 = $('#d2').css('display','block').html(num);
        $(window).scroll(function(){
            var windowTop = parseInt($(window).scrollTop());
            var top = parseInt($(document).scrollTop());
            var height = $(window).height();
            var height1 = $(document).height();

            console.log('window距离顶部距离:',windowTop);
            console.log('文档距离顶部距离:',top);
            console.log('window高度:',height);
            console.log('文档的高度:',height1);

            var totalHeight = windowTop + height;

            if((height1 <= totalHeight+5) && page<= 5){
                page++;
                num++;
                console.log(page,num);
                $('#main').append(`<div style='background-color : red;height: 100px;margin-top: 10px'>${num}</div>`);
            }
        });
    });