手机端下拉刷新

//获取滚动条位置

function getScrollTop() {
var scrollTop = 0;
if(document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if(document.body) {
scrollTop = document.body.scrollTop;
}

//获取当前可视范围的高度

function getClientHeight() {
var clientHeight = 0;
if(document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}

//获取文档完整的高度 

function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

//滚动事件触发

window.onscroll = function() {
  if(getScrollTop() + getClientHeight() == getScrollHeight()) {
  //执行事件
  }
}

原理:

代码做了一个判断getScrollTop() + getClientHeight() == getScrollHeight(),第一个函数获取滚动条的位置,第二个函数获取当前屏幕可见的高度,第三个函数获取当前文档的总高度,

当前两个参数等等第三个参数的时候,就表示文档已经拉到底部了,触发事件向后台请求数据。这样一个分页功能就写出来了

猜你喜欢

转载自www.cnblogs.com/liubu/p/9012767.html
今日推荐