Question

我有api的列表，明智地返回数据页面。我已经为列表实施了无限的争吵。

我目前正在做的是：

if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
                    console.log("Scroll Postion" + $(window).scrollTop());
                    //API HIT
                }

这就像魅力一样，但问题是用户必须滚动到页面的绝对底部才能点击api。

我们想要达到的目标是 - 当用户从页面顶部达到75％到80％时，下一页的api命中应自动进行。

我尝试使用：

if ($(window).scrollTop() * 1.2 >= $(document).height() - $(window).height())

和

if ($(window).scrollTop() + 100 >= $(document).height() - $(window).height())

但是当我们滚动到页面底部时，这两种方法都会遇到多个api。

对此更好的解决方案吗？

Answer 1

你可以试试这个......

HTML代码： 装载更多加载...

        </div>
    </div>
</div>
</div>

javascript代码：

$(document).scroll(function(e) {
    if (elementInViewport(document.getElementById('load_more'))) {
        if ($('#test1').hasClass('ajax-loading')) {
            return;
        } else if ($('#test1').hasClass('stop-loading')) {
            $('#load_more').hide();
        } else {
            $('#test1').addClass('ajax-loading');
        }
        $('.ajax-loading-gif').show();
        your_api_call()
    }
});

function your_api_call(){
    $.ajax({
        type : 'POST',
        url : '/controller/method-name',
        data :'para1='+ paraval1,
        cache : false,
        dataType : 'json',
        beforeSend : function() {
        },
        success : function(data, textStatus, jqXHR) {
            var values=data.rows;
            if (values.length > 0) {
                //noOfPage = Math.floor((data.records/10)+1);
                console.log(values.length)
            //  your work

            }  else {
                $('#load_more').hide();
                $('#test1').addClass(
                        'stop-loading');
                $('.ajax-loading-gif').hide();
            }
            $('.ajax-loading-gif').hide();
            $('#test1').removeClass(
                    'ajax-loading');
        },
        error : function(xhr, ajaxOptions, thrownError) {
            alert('Some error occured')
        }
    });
}

    function elementInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;
    while (el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
    }
    return (top < (window.pageYOffset + window.innerHeight)
            && left < (window.pageXOffset + window.innerWidth)
            && (top + height) > window.pageYOffset && (left + width) >
  window.pageXOffset);
}

</script>

当滚动条几乎在页面的末尾时jQuery命中api？

1 个答案: