Automatically loads more information when scrolling to the bottom of the page based on JQuery

  • 2020-03-30 01:36:40
  • OfStack

Key codes:


var stop=true; 
$(window).scroll(function(){ 
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 
    if($(document).height() <= totalheight){ 
        if(stop==true){ 
            stop=false; 
            $.post("ajax.php", {start:1, n:50},function(txt){ 
                $("#Loading").before(txt); 
                stop=true; 
            },"text"); 
        } 
    } 
});

HTML:


<div id="Loading">Loading...</div>

The method of implementation is to compare the total page height and the roll height to determine whether the bottom is reached or not. If the bottom is reached, more content is read through ajax, and before is inserted into the Loading.
The stop parameter takes into account the ajax read time and prevents events from being triggered multiple times during an ajax read, resulting in multiple loads of content.


Related articles: