鼠标滚动到页面底部自动加载数据--阻止多次请求

本文介绍了一个使用JavaScript实现的页面滚动到底部自动加载数据的解决方案,并通过比较滚动条位置和文档高度来防止多次请求。当用户滚动到页面底部时,触发getShareFiles()函数加载更多数据,同时设置条件确保只发送一次请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//鼠标滚动到页面最底部加载数据
var documentHeight = [0];
$(window).bind("scroll",function() {
 
if($(document).scrollTop() + $(window).height() > $(document).height()-1){
    documentHeight.
push($(document).height())
   
if(documentHeight[documentHeight.length-1]>documentHeight[documentHeight.length-2]){
      documentHeight[documentHeight.
length-2] = documentHeight[documentHeight.length-2] + documentHeight[documentHeight.length-1];
     
$(".res-more").css("display","none");
     
self.getShareFiles();
   
}
  }
else{
   
$(".res-more").css("display","block");
 
}
})

为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部,算法如下:

滚动条卷起来的高度 +窗口高度 > 文档的总高度 + 1


两层判断,外层判断是否到达页面底部,内层判断控制只触发一次请求;


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值