スクロールバーがページの終わりに近づいているときにjQueryがapiを押していますか？

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>