The idea of pull-up loading

Pull up loading is to trigger ajax event request data when the screen is pulled to the bottom

2. All the codes below the height of the document and the height of the scroll to get the height of the screen are compatible and can be used directly

Javascript:
alert(document.body.clientWidth);        //Page visible area width (body)
alert(document.body.clientHeight);       //Page visible area height (body)
alert(document.body.offsetWidth);       //The visible area of web page is wide (body), including border, margin, etc
alert(document.body.offsetHeight);      //The visible area of web page is wide (body), including border, margin, etc
alert(document.body.scrollWidth);        //Full text width of webpage body, including the area not seen when there is scroll bar
alert(document.body.scrollHeight);       //Full text height of webpage body, including the unseen area when there is scroll bar
alert(document.body.scrollTop);           //Top (scroll bar) of the web page
alert(document.body.scrollLeft);           //Page scrolled left
alert(window.screenTop);                     //Browser distance Top
alert(window.screenLeft);                     //Browser distance Left
alert(window.screen.height);                //High screen resolution
alert(window.screen.width);                 //Width of screen resolution
alert(window.screen.availHeight);          //The height of the screen's available workspace
alert(window.screen.availWidth);           //The width of the working area available for the screen



Jquery
alert($(window).height());                           //Browser current window visual area height
alert($(document).height());                        //The height of the document in the browser's current window
alert($(document.body).height());                //The height of the document body in the browser's current window
alert($(document.body).outerHeight(true));  //The total height of the browser's current window document body includes the border padding margin
alert($(window).width());                            //Browser current window visual area width
alert($(document).width());                        //Browser current window document object width
alert($(document.body).width());                //The width of the document body in the browser's current window
alert($(document.body).outerWidth(true));  //The total width of the browser's current window document body includes the border padding margin

 //Get the current position of the scroll bar
    function getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    //Get the height of the current visual range
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        } else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    }

    //Get the full height of the document
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

var upDown = function (opt) {
        opt = opt || {};
        var up = opt.up || function () {
        };
        window.onscroll = function () {

if (getScrollTop() + getClientHeight() == getScrollHeight()) { //Distance from top + current height > = the total height of the document represents the sliding bottom
             if(is_scroll === true){ //When this is true, call up method

   up();

  }}

        }
    };

3. First, load the first page by default, and call the upDown method in window.onload

   window.onload = function () {
        getData();//The first page is displayed after the page is loaded
        upDown({
            up: getData
        });
    }

4. When the page rolls to the bottom, the up() method is triggered, and the up calls the getdata method. Here is how to get the data

Define two variables VaR is? Scroll = true; VAR count = 0

ajax is not introduced. You can see this http://www.cnblogs.com/seanlxj/diary/2018/01/30/8385498.html

var is_scroll = true;
var count = 0;
function getAjax() {
        var el, li; 
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'page' + count + '.json'); 
        xhr.send();
        xhr.onreadystatechange = function () {
            var loadingEnd = document.getElementById('loadingEnd');
            var dropLoad = document.getElementById('dropLoad');
            if (xhr.readyState === 4 && xhr.status === 200) {
　　　　　　　　 
                var res = xhr.responseText;
                var data = JSON.parse(res);
                allData = allData.concat(data);//New page stitched back;
                if (data.length === 0) {  //When the length of the acquired data is 0, it means that no count + is required and no data is available
                     is_scroll = true // Defined as true  
                    loadingEnd.style.display = 'block'; //Show no data

                }
                el = document.querySelector("#wrapper ul"); 
                for (var k in data) { //Traverse every piece of data obtained
                    li = document.createElement('li'); // Create node
                    li.innerHTML = "<div class='item-top'><span class='item-title'>" + data[k].name + "</span><span class='item-money'>" + data[k].money + "</span></div><div class='item-time'>" + data[k].time + "</div><div class='bottom-line'></div>";
                    el.appendChild(li, el.childNodes[0]);
                }
                dropLoad.style.display = 'block';//Display loading
            } else {  //Whether this is true or not is a fake. No matter whether the request is not requested, there will be an animation in loading
                setTimeout(function () {
                    dropLoad.style.display = 'none';
                }, 500)
            }
        };
    }

  <style>
        .drop-load {
            text-align: center;
            height: 80px;
            line-height: 50px;
        }

        .drop-load .loading {
            display: inline-block;
            height: 15px;
            width: 15px;
            border-radius: 100%;
            margin: 6px;
            border: 2px solid #666;
            border-bottom-color: transparent;
            vertical-align: middle;
            -webkit-animation: rotate 0.75s linear infinite;
            animation: rotate 0.75s linear infinite;
        }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
            }
            50% {
                -webkit-transform: rotate(180deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .loadingEnd {
            font-size: 0.3rem;
            color: black;
            width: 100%;
            height: 40px;
            text-align: center;
        }

    </style>

<body>
<div>
    <ul>
    </ul>
</div>
<div id="dropLoad" class="drop-load" style="display: none">
    <span class="loading"></span>
    <span>Loading</span>
</div>
<div id="loadingEnd" class="loadingEnd" style="display: none">After all</div>
</body>