Asynchronous loading technology realizes waterfall effect when scroll bar goes to the bottom

  • 2021-07-18 07:41:27
  • OfStack

Asynchronous loading technology realizes waterfall effect. When the scroll bar reaches the bottom, an event is triggered. This event is written to the $. get () event, which passes the category id and page number to the internal program page. The program will return the product list of the opposite page under that category. If the program queries that the current class has no products, it will return empty.

Scroll bar events must be written in window. onscroll before they can be effectively judged. As follows:


window.onscroll=function(){<br>      
// var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var tops = $(document).scrollTop(); // Gets the position of the scroll bar 
var sctop = $(document).height()-$(window).height();
var id = $("#ajax_claid").val();
if(!id){
id=8;
}
$("#ajax_p").val(tops);
if(tops>=sctop)// Indicate that the scroll bar is already at the bottom 
{
var b=$("#ajax_p").val();
if(b>a){
page=page+1;// Pass page number 
}
var Url = "aja_pro/"+id+"/"+page;// Program page, query information to return data, and directly return to the belt html Information of. 

$.get(Url,function(data){
$("#aja_jia").append(data);
});

}
};

Related articles: