移动端上滑加载的DOM实现

• 在移动端开发中经常会遇到渲染列表数据的业务，而首屏通常容纳不了列表的数据视图，所以要用到类似分页概念的数据加载机制。在人机交互的领域中，滑动加载数据对于用户是一个不错的交互体验，故通过滑动事件来触发数据加载是一个不错的选择。

• 通过查阅资料，DOM中与滑动有关的属性有很多，这里真正要用到的有三个，如下所示：
  clientHeight：手机屏幕的高度
  scrollHeight：DOM内容的高度
  scrollTop：垂直滚动条距离顶部的距离，随着向上滑动而增加
  规律：clientHeight + scrollTop <= scrollHeight

• 具体实现如下：

//手机屏幕的高度
let clientHeight = document.body.clientHeight; 
//DOM内容的高度
let scrollHeight = document.body.scrollHeight;
//垂直滚动条距离顶部的距离，随着向上滑动而增加
let scrollTop = document.body.scrollTop;
//提前加载的滑动距离（为什么要提前加载？因为网络请求存在延迟，如果不提前一会请求网络，可能给用户带来不好的交互体验。）
let proLoadDis = 30; 

if ((scrollTop + clientHeight) >= (scrollHeight - proLoadDis)) {
	//发起请求
	console.log(scrollTop + ':' + clientHeight + ':' + scrollHeight)
}