原生JS实现下拉加载

吴维炜

于 2018-01-25 16:03:42 发布

阅读量1.2w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端就那么回事文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_38209578/article/details/79163103

前端就那么回事专栏收录该内容

122 篇文章 ¥19.90 ¥99.00

订阅专栏

本文详细介绍了如何利用JavaScript实现下拉加载功能，包括获取滚动条位置、可视范围高度、文档完整高度，以及如何设置触发下拉刷新的条件和获取页面元素的位置。

tips：实现的原理是通过获取①获取滚动条当前的位置②获取当前可视范围的高度 ③获取文档完整的高度

（一）获取滚动条当前的位置

//获取滚动条当前的位置
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

了解本专栏