原生 js 实现 h5 上拉加载

版权声明： https://blog.csdn.net/Gochan_Tao/article/details/88647380

实现原理

当前滚动条的位置 + 当前可视范围的高度 = 文档的高度

实现方法

// 获取当前滚动条的位置 
   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).scroll(function () {
	     if (getScrollTop() + getClientHeight() == getScrollHeight()) {
	         $('.refreshText').css('display', 'block')
	         setTimeout(() => {
	             pageIndex++
	             getlist()
	             console.log('上拉')
	         }, 500);
	     }
	 });