How do you make an Ajax call when a user scrolls down to the bottom of the screen

Question

I would like to make an Ajax call when a user scrolls down to the bottom of the screen. For some reason my code isn't working. I think it could be a syntax error but I checked my console and I don't see an error. Any suggestions, improvements or examples are welcomed.

<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>

You "think it could be a syntax error"? [Open the browser's console](https://webmasters.stackexchange.com/questions/8525/how-do-i-open-the-javascript-console-in-different-browsers) and see if there are errors so you don't have to guess. — JJJ, Jun 18 '17 at 14:57
Use [this](https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom) condition. It might work — Nimish, Jun 18 '17 at 14:58
@ Nimish Of course I've already looked in the console but I don't see an error — Mariton, Jun 18 '17 at 15:04
@mplungjan I've done that already. That's why I'm here. Looking for a clear concise answer — Mariton, Jun 18 '17 at 15:05
If there's no error message in the console then there is no syntax error. — JJJ, Jun 18 '17 at 15:10
@JJJ Obviously but do you have an idea of why this is not working? — Mariton, Jun 18 '17 at 15:24
@Mariton - the top links in the search I gave are tutorials that doe exactly what you ask: such as http://sgeek.org/how-to-implement-infinite-scroll-using-jquery-ajax-php/ — mplungjan, Jun 18 '17 at 15:27
@mplungjan Can you be more specific about my code in particular. I'm wondering why it's not working — Mariton, Jun 18 '17 at 15:33
The test in the example is using jQuery `if ($(document).height() - w.height() == w.scrollTop()) {` instead of your `if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {` - that could be a start — mplungjan, Jun 18 '17 at 15:35
@ user8175473 Not yet I was told that using `$post_id` should help my php page display since I'm pulling one PHP page into another . I've never used it before. — Mariton, Jun 19 '17 at 14:57
@Mariton Did you try my solution. I had added jsfiddle link into answer. http://jsfiddle.net/vo3um62x/ — hasan, Jun 26 '17 at 11:00

score 1 · Accepted Answer · answered Jun 18 '17 at 16:54

You can use 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();
       }
});

How do you make an Ajax call when a user scrolls down to the bottom of the screen

1 Answers1