Detect div scroll jquery

Question

I want to detect div scroll. What this code does is detect the whole window scroll:

$(document).ready(function() { var track_load = 0; //total loaded record group(s) var loading  = false; //to prevents multipal ajax loads var total_groups = <?php echo $total_groups; ?>; //total record group(s)  $('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group  $(window).scroll(function() { //detect page scroll      if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?     {          if(track_load <= total_groups && loading==false) //there's more data to load         {             loading = true; //prevent further ajax loading             $('.animation_image').show(); //show loading image              //load data from the server using a HTTP POST request             $.post('autoload_process.php',{'group_no': track_load},    function(data){                  $("#results").append(data); //append received data into the element                  //hide loading image                 $('.animation_image').hide(); //hide loading image once data is received                  track_load++; //loaded group increment                 loading = false;               }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?                  alert(thrownError); //alert with HTTP error                 $('.animation_image').hide(); //hide loading image                 loading = false;              });          }     } }); 

});

Here is my HTML code.

<div id="scrollingbox"> <ol id="results"> </ol> <div class="animation_image" style="display:none" align="center"><img src="ajax-loader.gif"></div> </div> 

I used the div ID but it outputs nothing instead of two.

Answer 1

Not sure, but you can just reference the div by id, class, etc in the scroll() function:

Here is a simple jsfiddle: http://jsfiddle.net/collabcoders/v2RbN/

$(".box").scroll(function() { //.box is the class of the div     $("span").css( "display", "inline" ).fadeOut( "slow" ); }); 

Updated: http://jsfiddle.net/collabcoders/v2RbN/1/

$("span").hide();  $(".box").scroll(function() {     if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {         $("span").show();         } else {         $("span").hide();     } });