Home >Backend Development >PHP Tutorial >Asynchronous loading technology realizes the waterfall flow effect when the scroll bar reaches the bottom, asynchronous scroll bar_PHP tutorial

Asynchronous loading technology realizes the waterfall flow effect when the scroll bar reaches the bottom, asynchronous scroll bar_PHP tutorial

WBOY
WBOYOriginal
2016-07-13 10:18:53967browse

Asynchronous loading technology realizes the waterfall flow effect when the scroll bar reaches the bottom, asynchronous scroll bar

Asynchronous loading technology achieves waterfall flow effect. When the scroll bar reaches the bottom, an event is triggered. This event is written into the $.get() event and the category id and page number are passed to the internal program page. The program will return the product list of the relative page under that category. If the program queries If there is no product in the current class, it will return empty.

Scroll bar events must be written in window.onscroll to be effective. As follows:

window.onscroll=function(){<br>    
// var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var tops = $(document).scrollTop(); //获取滚动条的位置
var sctop = $(document).height()-$(window).height();
var id = $("#ajax_claid").val();
if(!id){
id=8;
}
$("#ajax_p").val(tops);
if(tops>=sctop)//成立说明滚动条已在最底部
{
var b=$("#ajax_p").val();
if(b>a){
page=page+1;//传递页码
}
var Url = "aja_pro/"+id+"/"+page;//程序页面,查询信息返回数据,直接返回带html的信息。

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

}
};

Jquery’s scroll event enables automatic loading of new items when the scroll bar reaches the bottom in aspnet

Here is a lazyload, which is a delayed loading effect
Drag the scroll bar to load the displayed data
There are tutorials and source code inside
Reference: www.blueidea.com/...=11641

Using JS, how to determine whether the scroll bar has scrolled to the bottom of the page

Change it to this to be compatible with IE and chrome
4ec11beb6c39d0703d1751d203c17053
window.onscroll=function(){
var a = document.documentElement.scrollTop= =0? document.body.clientHeight : document.documentElement.clientHeight;
var b = document.documentElement.scrollTop==0? document.body.scrollTop : document.documentElement.scrollTop;
var c = document. documentElement.scrollTop==0? document.body.scrollHeight : document.documentElement.scrollHeight;

if(a+b==c){
showmore();
}
}
2cacc6d41bbb37262a98f745aa00fbf0

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/879724.htmlTechArticleAsynchronous loading technology realizes the waterfall flow effect when the scroll bar reaches the bottom, asynchronous scroll bar asynchronous loading technology realizes the waterfall flow Effect. An event is triggered when the scroll bar reaches the bottom, this...
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn