ユーザーが画面の一番下にスクロールしたときにAjaxコールを作成する方法

Question

ユーザーが画面の一番下までスクロールダウンするときにAjaxコールを行いたいとします。何らかの理由で私のコードが動作していません。私はそれが構文エラーかもしれないと思うが、私は私のコンソールをチェックし、私はエラーが表示されません。どんな提案、改善、または例も歓迎されます。

<div id="content"> 
<?php include('post-1.php'); ?> 
</div> 

<div id="loading-image" style="display: none;"></div> 
<div id="part2"></div> 
<script> 
window.onscroll = function(ev) { 
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 

    $('#loading-image').show(); 
    $.ajax({ 
     url: "<?php echo get_stylesheet_directory_uri();?>/post-2.php", 
     cache: false, 
     success: function(html){ 
      $("#part2").html(result); 
     }, 
     complete: function(){ 
      $('#loading-image').hide(); 
     } 
    }); 


} 
}; 
</script> 

Answer 1

あなたは "それは、構文エラーの可能性がありだと思う" this.Works here

function CallAjax(){ 
     $.ajax({ 
     url: "<?php echo get_stylesheet_directory_uri();?>/post-2.php", 
     cache: false, 
     success: function(html){ 
      $("#part2").html(result); 
     }, 
     complete: function(){ 
      $('#loading-image').hide(); 
     } 
     });  
} 

$(window).scroll(function() { 
     var divTop = $('#yourDivId').offset().top, 
      divHeight = $('#yourDivId').outerHeight(), 
      wHeight = $(window).height(), 
      windowScrTp = $(this).scrollTop(); 
     if (windowScrTp > (divTop+divHeight-wHeight)){ 
      console.log('reached'); 
      // add your ajax method here; 
      CallAjax(); 
     } 
});