慕课网学习-移动端滚动组件加载

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

猜你喜欢

热点阅读