scrollUtils.js #触底触发上拉加载更多 #越线 #上下滚动事件

 

scrollUtils.js

//取窗口滚动条滚动高度
function getScrollTop()
{
  var scrollTop=0;
  if(document.documentElement&&document.documentElement.scrollTop)
  {
  scrollTop=document.documentElement.scrollTop;
  }
  else if(document.body)
  {
  scrollTop=document.body.scrollTop;
  }
  return scrollTop;
}
//取窗口可视范围的高度
function getClientHeight()
{
  var clientHeight=0;
  if(document.body.clientHeight&&document.documentElement.clientHeight)
  {
  var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  }
  else
  {
  var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  }
  return clientHeight;
}
//取文档内容实际高度
function getScrollHeight()
{
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
//监听触底
function monitorBottomOut(fun) {
    window.onscroll = function() {
        if(getScrollTop()+getClientHeight()+1 >= getScrollHeight()) { //+1是为了补差
            fun();
        }
    }
    
}
//监听越线
function Lineout(line,fun) {
    window.onscroll = function() {
        if(getScrollTop()>line) {
            fun(true);
        }else {
            fun(false);
        }
    }
}
//上下滚动监听
function verticalScrollDirection(upfun,downfun) {
    var prev = 0;
    window.onscroll = function() {
        let currentScrollTop = getScrollTop();
        if(currentScrollTop>prev) {
            upfun?upfun():'';
        }else {
            downfun?downfun():'';
            
        }
        prev = currentScrollTop;

    }
    
}