2017-06-18 6 views
0

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

を使用することができますか? [ブラウザのコンソールを開く](https://webmasters.stackexchange.com/questions/8525/how-do-i-open-the-javascript-console-in-different-browsers)にエラーがあるかどうかを確認してください。推測する必要はありません。 – JJJ

+0

[this](https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom)の条件を使用してください。それは動作する可能性があります – Nimish

+0

最初に必要なGoogleをお願いしますhttps://www.google.com/search?q=scroll+ajax+php – mplungjan

答えて

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(); 
     } 
}); 
関連する問題