Ajax 滚动异步加载数据

最新推荐文章于 2022-07-03 15:16:44 发布

辛苦的码农20200609

最新推荐文章于 2022-07-03 15:16:44 发布

阅读量97

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2bhhakhb21j.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

第一种情况：单个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）
               }
           }
    );

})

辛苦的码农20200609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 滚动异步加载数据

第一种情况：单个div滚动HTML<body><div class="search" #if($m_o_d_e == "nightmode") style="background: #2e2e2e;" #end><a onclick="firstSearch()"><b></b>搜索</a></div><a href="javascript:;
复制链接

扫一扫