在特定 div 上向下滚动时调用 JavaScript 函数？答案

【问题标题】：Call JavaScript function on scroll down on particular div?在特定 div 上向下滚动时调用 JavaScript 函数？
【发布时间】：2015-04-17 05:03:26
【问题描述】：

我有三个不同的 div。现在，如果我向下滚动所有三个 div，那么我应该调用一个调用 ajax 的 JavaScript 函数。以下是我尝试过的。这里的数据来自 ajax on Document on ready，这里的数据来自 id='doc',id='user',id='lawfirms'。所以你看不到项目，因为所有 div(s) 都是动态创建的。

<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>

【问题讨论】：

标签： javascript jquery html ajax jquery-plugins

【解决方案1】：

它的工作。使用下面的代码，

<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>

【讨论】：