滚动加载
window(可以是其他的容器元素)上监听滚定事件,当特定的元素滚入可视区域之后触发ajax加载更多数据,触发过后就不再重复触发了,所以要移除标记。这里的一个关于元素滚动进入视窗的判断原理如下:元素到容器顶端的距离 - 窗口的高度 = 元素进入视窗需要滚动的距离,用这个距离和容器滚动距离比较就能判断是否进入视窗。
$(element).offset().top - $(container).height() < $(container).scrollTop
$(function () {
$(window).on('scroll',function () {
var containerScroll=$(this).scrollTop()
$(".scroll").each(function () {
var subtract = $(this).offset().top-$(window).height();
if(containerScroll > subtract)
{
console.log('loading: ',1111);
$(this).removeClass('scroll');
$.ajax({
url:'/search',
method:'POST',
dataType:'json',
data: {action:'search', page:1},
success:successCallback,
error:function (resp){
console.log('XXXX: ',resp)
}
});
}
})
})
});