js滚动加载（无限加载）

原理图

实现无限分页的过程大体以下：

1 视窗滚动到底部

2 触发加载，添加到现有内容的后面。

所以，可能会出现两种状况：

1 当页面的内容不多，没有出现滚动条。

2 当页面的内容不少，出现了滚动条。

 

针对这两种状况，须要理解几个概念：

scrollHeight即真实内容的高度；

clientHeight比较好理解，是视窗的高度，就是咱们在浏览器中所能看到内容的高度；

scrollTop是视窗上面隐藏掉的部分。

实现的思路：

1 若是真实的内容比视窗高度小，则一直加载到超过视窗

2 若是超过了视窗，则判断下面隐藏的部分的距离是否小于必定的值，若是是，则触发加载。（即滚动到了底部）