向下滚动特定div时调用JavaScript函数？

Question

I have three different div. Now on, all three div if i am doing scroll down then i should call a JavaScript function which call a ajax. Below is what i have tried. Here data came through ajax on Document on ready, Here data came on id='doc',id='user',id='lawfirms'. So you can't see items because all div(s) are create dynamically.

<script>
var processing;
$(document).ready(function(){
var lastScroll = 0;
    $(".doc_ary").scroll(function(e){
        var st = $(this).scrollTop();
        if(st > lastScroll)
        {
        var st = $(this).scrollTop();

        if (processing)
            return false;
            if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.6){
            doc_ary();
        }
       } 
    });
});
</script>
<script>
var processing;
$(document).ready(function(){
var lastScroll = 0;
    $(".user_ary").scroll(function(e){
        var st = $(this).scrollTop();
        if(st > lastScroll)
        {
        var st = $(this).scrollTop();

        if (processing)
            return false;
            if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.6){
            user_ary();
        }
       } 
    });
});
</script>
<script>
var processing;
$(document).ready(function(){
var lastScroll = 0;
    $(".lawfirms_ary").scroll(function(e){
        var st = $(this).scrollTop();
        if(st > lastScroll)
        {
        var st = $(this).scrollTop();

        if (processing)
            return false;
            if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.6){
            lawfirms_ary();
        }
       } 
    });
});
</script>
<section id="content">
    <div class="homebar" style="background-color:#f4af55">
    </div>
    <div style="background-color:#fff">
        <div class="container">
            <div class="row">
                <div class="col-xs-4 pull-left" style="overflow:auto;" id="doc_ary">
                    <div style="width:100%; height:800px; border:1px solid #f4af55;">
                        <div style="width: 100%; height:50px; background-color:#66cccc; text-align:center; font-size:20px; color:#fff;line-height: 50px;">
                            Document
                        </div>

                        <div style="height:700px; overflow:scroll;" id="doc"> </div>

                        <div >
                            <button style="width: 100%;padding:12px; background-color:#66cccc; text-align:center; color:#fff;"> Load More</button>
                        </div>
                    </div>
                </div>

                <!--- DOCUMENTS-->

                <div class="col-xs-4  pull-left">
                    <div style="width:100%; height:800px; border:1px solid #f4af55;" id="user_ary">
                        <div style="width: 100%; height:50px; background-color:#66cccc; text-align:center; font-size:20px; color:#fff;line-height: 50px;">
                            Lawyer
                        </div>

                        <div style="height:700px; overflow:auto;" id="user">

                        </div>
                        <div >
                            <button style="width: 100%;padding:12px; background-color:#66cccc; text-align:center; color:#fff;"> Load More</button>
                        </div>
                    </div>
                </div> 

                <!-- LAW FIRM -->

                <div class="col-xs-4  pull-left">
                    <div style="width:100%; height:800px; border:1px solid #f4af55; " id="lawfirms_ary">
                        <div style="width: 100%; height:50px; background-color:#66cccc; text-align:center; font-size:20px; color:#fff;line-height: 50px;">
                            Law Firm
                        </div>

                        <div style="height:700px; overflow:auto;" id="lawfirms">

                        </div>
                        <div >
                            <button style="width: 100%;padding:12px; background-color:#66cccc; text-align:center; color:#fff;"> Load More</button>
                        </div>
                    </div>
                </div> 


            </div>
        </div>
    </div>
</section>

<script>
function doc_ary()
{
   alert('doc_ary');
}
</script>
<script>
function user_ary()
{
   alert('user_ary');
}
</script>
<script>
function lawfirms_ary()
{
   alert('lawfirms_ary');
}
</script>

Answer 1

Its working. Use this below code,

<script>
var processing;
$(document).ready(function(){
  alert('function_called');
  var div1=$("#div_doc_ary");
  var lastScroll = 0;
    $(div1).scroll(function(e){
        var st = $(this).scrollTop();
        if(st > lastScroll)
        {
        var st = $(this).scrollTop();
        if (processing)
            return false;
        if ($(window).scrollTop() >= ($(div1).height() - $(window).height())*0.7){
            alert('scrollDownCalled');
            offset=++offset;
            processing = false;
         });
        }
       } 
    });
});
</script>