上拉加载更多工具函数

本文介绍如何使用JavaScript编写函数来检测网页滚动是否达到底部,并在触底时触发回调操作。通过getScrollTop(), getScrollHeight(), 和getWindowHeight() 函数配合,实现智能的页面加载优化。
摘要由CSDN通过智能技术生成

上拉加载更多工具函数:

function getScrollTop(){
  var scrollTop=0;
  var bScrollTop=0;
  var dScrollTop=0;
  if(document.body){
    bScrollTop=document.body.scrollTop;
  }
  if(document.documentElement){
    dScrollTop=document.documentElement.scrollTop;
  }
  scrollTop=(bScrollTop-dScrollTop>0) ? bScrollTop : dScrollTop;
  return scrollTop;
}
function getScrollHeight(){
  var scrollHeight=0;
  var bScrollHeight=0;
  var dScrollHeight=0;
  if(document.body){
    bScrollHeight=document.body.scrollHeight;
  }
  if(document.documentElement){
    dScrollHeight=document.documentElement.scrollHeight;
  }
  scrollHeight=(bScrollHeight-dScrollHeight>0) ? bScrollHeight : dScrollHeight;
  return scrollHeight;
}

function getWindowHeight(){
  var windowHeight=0;
  if(document.compatMode=="CSS1Compat"){
    windowHeight=document.documentElement.clientHeight;
  }else{
    windowHeight=document.body.clientHeight;
  }
  return windowHeight;
}

判断检测触底了

function scrollToBottom(callBack){
  if(getScrollTop()+getWindowHeight()===getScrollHeight()){
    //触底了
    callBack && callBack();
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值