How to load more pages with js when the scroll bar is pulled down (code attached)

The content of this article is about how to load more pages with js when the scroll bar is pulled down (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

On mobile phones, the data list paging will load more when it is pulled down to the bottom. However, in March last year, we encountered a customer request that the web page should also be pulled down to load more. , so according to the web page, more content is loaded when the scroll bar is pulled down (personal project experience). The code in the article implements this drop-down loading. It is very simple. The code is as follows:

var totalPages;//总页数
var pageno = 0;//当前页数
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue == 0) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert(&#39;没有更多了&#39;);
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分页列表的接口
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

However, today the testers found that when When the browser is zoomed or the screen display setting is zoomed, it cannot be pulled down to load. After more than a year, it is really amazing@_@

After debugging, I found that the value of positionValue cannot be equal to 0 when zooming, and I cannot continue to load more. At this time I saw an article about drop-down loading of more DEMO (js implementation):

If you wait for the scroll bar to be pulled to the bottom before loading, it will affect the user experience. Because generally when loading dynamically, you need to request resources from the server, which takes time. A better way is to dynamically load more and request resources from the server when the scroll bar is a certain distance (C) from the bottom. That is, preloading and prereading. The formula is as follows
this.scrollHeight - C == $(this).scrollTop() $(this).height()

I was inspired after reading this, so I set the value of positionValue to greater than or equal to -10. The 10 here is the value of a certain distance (C) between the scroll bar and the bottom.
Sure enough, there is no problem. Pull-down loading can also be achieved normally when zooming.

So, record it, share it with everyone, and encourage each other.

Another reminder, $(window).scroll(function() listens for scroll events and does not execute. The adopted answer in this question mentioned:

html, if the height style of the body is set to 100%,# The ##$(window).scroll method will not detect the correct scroll height (0), causing the scroll listening event to fail. Setting html,body{ height:auto } can solve the problem.code

var totalPages;//总页数
var pageno = 0;//当前页数
var C = 10;//滚动条距离底部的距离
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue >= -C) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert('没有更多了');
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分页列表的接口
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

Related recommendations:

jQuery scrolls down to instantly load the content to achieve the waterfall flow effect, jquery scrolls down

js implements the scroll bar to scroll to the bottom of the page to continue loading_javascript skills

The above is the detailed content of How to load more pages with js when the scroll bar is pulled down (code attached). For more information, please follow other related articles on the PHP Chinese website!