设计思想:利用
onscroll
方法监听盒子距离顶部的距离、可视区域高度、滚动条高度;
距离顶部的距离+可视区域高度=滚动条高度的时候已到盒子底部然后进行数据加载;
首次进入页面数据沾满盒子用递归函数判断盒子内容是否大于盒子的高度;否则继续加载;
/* 需要滚动的容器 */
<div class="content"></div>
<script>
/* 获取到容器调用方法 */
$('.content').Scoller(res => {
console.log('res:返回当前滚动到第几页');
},true) // true:开启加载中动画,不写或者 'false' 不开启动画
</script>