简单无限滚动的实现

在使用elementUI组件库的时候，用到了无限滚动这个功能。我没有看源码，直接在网上学习了下实现的思路，然后自己手动编码以下。在此总结下。

假设页面上有一个盒子容器，容器内有一些子元素。容器的高度是固定的，有纵向滚动条。怎么做到滚动到底部的时候，就能触发事件查询数据呢？

用图形的形式分析下：

image.png

知道思路后，我们就是想办法用代码的形式实现它即可。

js
子元素总高度 scrollHeight
可视区域高度 clientHeight
滚动条纵向偏移量 scrollTop

我把代码贴上来,因为是vue技术栈，所以在vue环境开发，cdn引入即可。（还有个原因是，vue用多了之后，原生js操作dom不太会写了，尴尬￣□￣｜｜）

效果和第一个方法是一样的。（还有用vnode上报事件的方法，下次写）

这样，我就简单实现了一个向下的无限滚动功能。学习一个东西的时候，最好自己尝试找解决方法。如果找不到再学习别人的，重要的是理解思路，而不是死记硬背代码，这样才能记得牢固。