原生JS实现上拉加载更多功能

海阔天空.

于 2018-12-19 11:19:32 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：函数封装文章标签：上拉加载更多

本文链接：https://blog.youkuaiyun.com/weixin_41804429/article/details/85091204

函数封装专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的网页滚动监听方法，包括获取滚动条位置、可视区域高度及文档总高度的函数，并演示了如何在滚动到底部时触发特定操作。

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

//获取滚动条当前的位置， 就是距离页面顶部的距离
 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) {
    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()) {
              //do something
  }
}