JQ无限滚动（滚动至底部时，加载更多数据）

最新推荐文章于 2025-05-20 10:59:52 发布

姥姥家的饭

最新推荐文章于 2025-05-20 10:59:52 发布

阅读量832

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript jQuery js

本文链接：https://blog.youkuaiyun.com/qq_41950190/article/details/108004219

JavaScript 同时被 3 个专栏收录

19 篇文章

订阅专栏

16 篇文章

订阅专栏

jQuery

4 篇文章

订阅专栏

本文详细介绍了无限滚动加载技术的实现原理，通过监听滚动条位置和盒子尺寸来判断何时加载更多数据，确保用户体验流畅。文章提供了具体的代码示例，包括如何使用递归函数判断数据是否充满盒子，并在达到底部时自动加载数据。

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

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

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

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