Ajax 滚动异步加载数据

时间：2023-03-09 02:22:55
Ajax 滚动异步加载数据

第一种情况：单个div滚动

HTML

<body>

<!-- search start -->

<div class="search" #if($m_o_d_e == "nightmode") style="background: #2e2e2e;"  #end>

<a  onclick="firstSearch()"><b></b>搜索</a>

</div>

<a href="javascript:;" class="moveTop" id="movetop"></a>

<div class="domainBook">

    <div class="domainNav swiper-container">

       <ul class="swiper-wrapper">

       <li>左侧导航<li>

       li>左侧导航<li>

       li>左侧导航<li>

       </ul>

    </div>

    <div class="domainCon slideHeight">

    <!--滚动div-->

        <div class="groupM autoHeight">

           <ul id="subjectUl"></ul>

           <div class="pullUp" id="btu"></div>

        </div>

    </div>

</div>    

</body>

Javascript

$("document").ready(function(){

    //滚动监听事件

    $(".slideHeight").scroll(function(){

      var nScrollHight = $(this)[0].scrollHeight;

      var nScrollTop = $(this)[0].scrollTop;

      var nDivHight = $(".slideHeight").height();

    if(nScrollTop + nDivHight >= nScrollHight){

        $("#btu").html('<span class="pullUpIcon"></span>正在加载...');

        getMore(channelId);    //AJAX加载数据（到subjectUl）

    }

 });

第二种情况：整个页面滚动

HTML

<body>

<a href="javascript:;" class="moveTop" id="movetop"></a>

<!--滚动部分start-->

<div class="groupM slideHeight">

   <ul id="subjectUl"></ul>

   <div class="pullUp" id="btu"></div>

</div>

</body>

Javascript

$(function(){

    //滚动监听事件

    $(window).scroll(

           function () {

               /*当前滚动条到顶部的距离*/

               var top = $(document).scrollTop();

               /*当前浏览器的可视高度*/

               var height = document.body.clientHeight;

               /*当前网页（body）的高度*/

               var z_height = $(document).height();

               /*判断（网页的body高度减去当前浏览器的可视高度是否等于滚动条到顶部的距离）

                * 相等：则判定当前页面在底部

                * 不相等：判定当前页面不在底部

                * */

               var stats = ( z_height - height-top == 0) ;

               if (stats) {

                   /*当前网页在最底部，执行该函数*/

                   $("#btu").html('<span class="pullUpIcon"></span>正在加载...');

                   More();//AJXA异步加载数据（到subjectUl）

               }

           }

    );

})

相关文章