慕课网学习-移动端滚动组件加载
2019-11-13 本文已影响0人
等花开_8e16
scroll.jpeg
移动端滚动加载逻辑原理,如上图;
其中图上用到的概念解释:
1.scrollTop:表示获取或设置元素的内容向上滚动的像素值;
2.clientHeight:可见区域的高度,就是如果区域是
3.scrollHeight:表示获取一个元素的所含内容的高度,包括由于内容超出,滚动出在屏幕上不可见的
scrollTop + clientHeight > = scrollHeight来实现表示滚动到底部这个点
同时也可以加一个距离底部还有多少距离的阈值proLoadDis,当(scrollTop+clientHeight)>= (scrollHeight-proLoadDis)表示距离底部还有proLoadDis时就提前触发滚动到底部逻辑
移动端滚动加载逻辑原理,如上图;
其中图上用到的概念解释:
1.scrollTop:表示获取或设置元素的内容向上滚动的像素值;
2.clientHeight:可见区域的高度,就是如果区域是
overflow:auto
的情况下,里面内容如果超过这个高度就会出现滚动条3.scrollHeight:表示获取一个元素的所含内容的高度,包括由于内容超出,滚动出在屏幕上不可见的
scrollTop + clientHeight > = scrollHeight来实现表示滚动到底部这个点
同时也可以加一个距离底部还有多少距离的阈值proLoadDis,当(scrollTop+clientHeight)>= (scrollHeight-proLoadDis)表示距离底部还有proLoadDis时就提前触发滚动到底部逻辑