检测div滚动jquery [英] Detect div scroll jquery

问题描述

我想检测div滚动。这个代码的作用是检测整个窗口滚动：

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;

            });

        }
    }
});

}）;

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，但它不输出任何内容，而是输出两个。

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

推荐答案

不确定，但是你可以在scroll（）函数中引用div by id，class等：

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

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

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

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

$("span").hide();

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

这篇关于检测div滚动jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！