用JavaScript实现上拉加载

最新推荐文章于 2023-06-26 18:26:27 发布

原创最新推荐文章于 2023-06-26 18:26:27 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML5 #css3

Web前端专栏收录该内容

85 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现网页的上拉加载更多功能，包括获取滚动条位置、可视区域高度及文档总高度的方法，并通过监听滚动事件判断是否触底，从而触发新的数据加载。适用于需要无限滚动或分页加载数据的网页应用。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<style>
		#wrap{
			height:1000px;
		}
	</style>
</head>
<body>
	<div id="wrap">
		上拉内容
		
	</div>
	<script>
		
		//获取滚动条当前的位置
		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()) {
		        console.log('上拉刷新了')
		        //此处发起AJAX请求
		    }
		}

	</script>
</body>
</html>