0

I need to get an event when scroll reaches bottom of div and as per the below code I'm getting event for scroll reaches bottom, but the thing is that I'm getting more than one events and it is firing concurrently as long as scroll is in the bottom.

So is there any way to stop firing events continuously rather than firing events after processing the first event occured?

    $("#divid").bind('scroll', function() { 

    //Getting continuous event as far as scroll is in bottom

      if($('#divid')[0].scrollHeight - $('#divid').scrollTop() <= $('#divid').outerHeight()) 
      {
           //Code here---
      }
});
Udit Bhardwaj
  • 1,761
  • 1
  • 19
  • 29
ABHILASH SB
  • 2,122
  • 2
  • 21
  • 31
  • set a timeout or bind your event once. see http://stackoverflow.com/questions/19561574/scrolling-to-bottom-of-page-run-function-function-runs-too-many-times/19562496#19562496 - almost the same issue – Tschitsch Oct 24 '13 at 11:41

1 Answers1

0

To fire an event handler once, at the the start or end of a series of continuous events, you could debounce them.

http://benalman.com/projects/jquery-throttle-debounce-plugin/

function start() {
    // code to run at start of event
}

function end() {
    // code to run at end of event
}

$(window).scroll($.debounce(250, true, start));
$(window).scroll($.debounce(250, false, start));

The first argument is the amount of milliseconds that should pass before it's deemed to be a separate event. The second argument determines whether the event handler should run at the start or at the end of the series of events.

In your case you could use the 'end' version to check the scroll position when the user stops scrolling.

Tom Bowers
  • 4,951
  • 3
  • 30
  • 43