原理

监听区域滚动的scroll事件,计算

1
2
3
4
5
6
scroll.clientHeight  //滚动区域高度
scroll.scrollTop //当前滚动位置
scroll.scrollHeight //整个滚动区域高度

// 滚动区域高度 + 当前滚动位置 === 整个滚动区域高度
scroll.clientHeight + scroll.scrollTop === scroll.scrollHeight

代码

1
2
3
4
5
6
7
8
<div class="banner_top_right" id="scrollList">
<div class="mod_course_list" id="mod_list">
<ul class="course_list" id="m_list"></ul>
<div class="more_btn">
<span id="more_course">更多视频</span>
</div>
</div>
</div>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//滑动加载更多
const scroll = document.getElementById('scrollList');

scrollDom.onscroll = () => {
if (scroll.clientHeight + parseInt(scroll.scrollTop) === scroll.scrollHeight)
{
pageIndex++; //当前页数+1
//如果当前页数大于总页数
if (pageIndex > totalPage)
{
document.getElementById("more_course").innerText = "暂无更多";
}
else
{
//调用分页函数
init(pageIndex, 10);
}
}
}

init 函数参考
https://www.huyw96.com/post/fa5290e.html