javascript – 检测div滚动jquery

我想检测div滚动.这个代码是检测整个窗口滚动：

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

});

这是我的HTML代码.

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

我使用了div ID,但是它不输出两个.

解决方法

不确定,但是你可以在scroll()函数中通过id,class等引用div：

这是一个简单的jsfiddle：http://jsfiddle.net/collabcoders/v2RbN/

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

更新：http://jsfiddle.net/collabcoders/v2RbN/1/

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

javascript – 检测div滚动jquery

解决方法

猜你在找的jQuery相关文章