How to judge whether the scroll reaches the bottom?

The first knowledge to understand: scrollHeight,clientHeight,scrollTop

scrollHeight

Read only property, height includes all contents, including inner margin, but not including horizontal scroll bar, border and outer margin.

clientHeight

1. It is also a read-only attribute. The element without CSS or inline layout box is 0. It is the internal height of the element, including the internal margin, excluding the height of the scroll bar, the border, and the external margin of the x axis;
2. The same model of mobile phone is the same.

scrollTop

The top scrolling distance of this element (to the top of the viewport (usually html)).

You can calculate the distance to the bottom

Calculate whether to reach the bottom

Native js

element.scrollHeight - element.scrollTop === element.clientHeight

jquery

element..scrollHeight - element.scrollTop() == element.height()

Implement pull-down refresh

Using html+jq

var loadingState = {
        text:false,
        image:false,
        video:false
    }
    
var httpUrl2 = "https://api.apiopen.top/getJoke"
    var options1 = {
        page:1,
        count:10,
        type:"text"
    }
    var options2 = {
        page:1,
        count:10,
        type:"image"
    }
    var options3 = {
        page:1,
        count:10,
        type:"video"
    }
    
    //If you can't get the options in the window, you can only put them in the data object, and you can get them with data['options'+(index+1)]
    var data = {
        options1,options2,options3
    }

//Where is the request statement
    loadingState.text = true;
    textRender(options1);

//Listen for scrolling events to slide the container
$('.content').scroll(function(e){
    var index = $(this).index();
    //Get rolling distance
        var sTop =  $('.content').eq(index).scrollTop();
    //Get the height of the container
        var contentHeight = $('.content').eq(index).height();
    //Get rolling height
        var scrollHeight = $('.content').eq(index)[0].scrollHeight;
       //Load different content according to different options selected
        if(index==$(this).index()&&loadingState.text!=true)         {
         //Judge whether the bottom has been rolled
            if((sTop+contentHeight)==scrollHeight){
                //When it reaches the bottom, the load option is true, and then the operation
                loadingState.text = true;
                //Content fades out slowly
                $(this).animate({
                    scrollTop:sTop+80
                },1000)
                var options = data['options'+(index+1)];
                //Page number plus one
                options.page += 1;
                //Load newly acquired content
                textRender(options);
            }
        }           
}

//Load implementation function
funtion textRender(obj){
    //What to add
    if(obj == options1){
            console.log(obj);
            $.get(httpUrl2,obj).then(function(res){            
                res.result.forEach(function(item,i){
                    var html = `
                        <div class="mui-card">
                            <div class="mui-card-header mui-card-media">
                                <img src="${item.header}">
                                <div class="mui-media-body">
                                    ${item.name}
                                    <p>Published in ${item.passtime}</p>
                                </div>
                                
                            </div>
                            <div class="mui-card-content">
                                <div class="mui-card-content-inner">
                                    <p>${item.text}</p>
                                </div>
                            </div>
                            <div class="mui-card-footer">
                                <a class="mui-card-link">like</a>
                                <a class="mui-card-link">comment</a>
                            </div>
                        </div>
                    `
                    $('.content:eq(0)').append(html).css('backgroundImage',"none")
                    loadingState.text = false;
                    $('.loading.text').stop(true).slideUp(2000,function(){
                        $('.loading.text').remove()
                    })
                })
            })
        }
}