原理

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

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

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

代码

<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代码

//滑动加载更多
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 函数参考 juejin.cn/post/691481…

作者：皮卡丘皮卡丘
来源：掘金
版权声明：本文为原创文章，转载请附上链接！