JQ无限滚动(滚动至底部时,加载更多数据)

设计思想:利用onscroll方法监听盒子距离顶部的距离、可视区域高度、滚动条高度;
距离顶部的距离+可视区域高度=滚动条高度的时候已到盒子底部然后进行数据加载;
首次进入页面数据沾满盒子用递归函数判断盒子内容是否大于盒子的高度;否则继续加载;
在这里插入图片描述
在这里插入图片描述

/* 需要滚动的容器 */ 
<div class="content"></div>

<script>
	/* 获取到容器调用方法 */
	$('.content').Scoller(res => {
    
    
		console.log('res:返回当前滚动到第几页');
	},true) // true:开启加载中动画,不写或者 'false' 不开启动画
</script>

github 代码地址

猜你喜欢

转载自blog.csdn.net/qq_41950190/article/details/108004219