Question

hi am having a problem with infinite scroll functionality, when all the contents have been displayed it still continues to scroll (strange behavior). i am looking for a way to stop the infinite scroll when all contents are displayed

here is my code

<script type="text/javascript">
jQuery(document).ready(function ($) {
(function () {
  var page = 1,
    loading = false,
    finish = false;


  function nearBottomOfPage() {
    return $(window).scrollTop() > $(document).height() - $(window).height() - 200;
  }

  function finish() {
    finish = true;

  }
  $(window).scroll(function () {
    if (loading) {
      return;
    }
    if (nearBottomOfPage() && !finish) {
      loading = true;
      $('#loader').show();
      page++;
      $.ajax({
        url: '/office?page=' + page,
        type: 'get',
        dataType: 'script',
        success: function () {
          $('#loader').hide();
          loading = false;
        }
      });
    }
  });
}());

})

here is what i tried

 <script type="text/javascript">
 jQuery(document).load(function($) {
 function scrollfn (event) {
if (loading) {
  return;
}
if (nearBottomOfPage() && !finish) {
  loading = true;
  $('#loader').show();
  page++;
  $.ajax({
    url: '/office?page=' + page,
    type: 'get',
    dataType: 'script',
    success: function () {
      $('#loader').hide();
      loading = false;
      $(window).unbind('scroll',scrollfn);
    }
    });
   }
   }

  $(window).bind('scroll',scrollfn);
 })
 </script>

Answer 1

You never do call your “finish” function.

Call finish(); in your success ajax callback

If doesn’t work try 3 things:

1) I think your function checking for being nearBottomOfPage() is not correct (see my answer here for correct version: Calculating end of scroll on a web page) –> also try disabling all styles on your page too. If you have any negative margins or negative padding it will screw up your scroll detector calculation.

2) Forget temporarily about your nearBottomOfPage() – I mean try changing your code from if (nearBottomOfPage() && !finish) to just if (!finish) — if your finish call works then, you are definitely having a problem about nearBottomOfPage() as I said above in #1

3) If even with item #2 change it is still not working try to separate out your bound callback out of anonymous function into a separate function for more control over it, so you can unbind that callback later, like this:

function scrollfn (event) {
    if (loading) {
      return;
    }
    if (nearBottomOfPage() && !finish) {
      loading = true;
      $('#loader').show();
      page++;
      $.ajax({
        url: '/office?page=' + page,
        type: 'get',
        dataType: 'script',
        success: function () {
          $('#loader').hide();
          loading = false;
          $(window).unbind('scroll',scrollfn);
        }
      });
    }
  }

$(window).bind('scroll',scrollfn);