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.

Johnny · Accepted Answer · 2014-01-19 01:30:15Z

54

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

edited Jan 19, 2014 at 1:30

answered Jan 19, 2014 at 1:13

Johnny

1,1539 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3196424 Over a year ago

i revised my question sir, take a look stackoverflow.com/questions/21212051/…

user3196424 Over a year ago

it worked, thank you ver much! You saved my life from the President and VP of my school!

Amy Over a year ago

@johnnyarguelles : Awesome sir ... :)

Collectives™ on Stack Overflow

Detect div scroll jquery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related