滚动加载

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)
                        }
                    });
                }
            })
        })
    });
posted @ 2017-03-21 19:46  CooMark  阅读(253)  评论(0编辑  收藏  举报