业务背景
常常会有这样的业务场景。下拉加载更多。之前我手写过一个方案，但是后来发现github上已经有现成的库react-infinite-scroll-component了(之前手写的时候，关键词没有搜对，所以没有找到现成的库。哈哈哈哈）。于是看一下它的源码，对比一下我之前的实现。
我的方案
在了解下拉加载更多这个功能之前，需要搞清楚clientHeight, scrollTop以及scrollHeight 三个概念。
可以看这篇文章
下拉加载更多的方案就是，当满足如下公式时，去请求资源
target.scrollTop + target.clientHeight = target.scrollHeight
具体方案就是：
在某个元素上绑定scroll监听事件，调用load函数。做得更精细点，当上一次load请求没有产生任何数据，那么下一次不再请求。
function handleScroll(event) {
let isToBottom = event.target.scrollTop + event.target.clientHeight - event.target.scrollHeight === 0
if (isToBottom && hasMore) {
load()
}
}
element.addEventListener('scroll', this.handleScroll)
源码解析
我看了一下react-infinite-scroll-component的源码，发现原理都是一样的。只不过别人处理得更精细一点
精细点1
在调用监听函数时，有一个固定时间的延迟，为了防止多次监听函数
this.throttledOnScrollListener = throttle(this.onScrollListener, 150).bind(
this
);
this.el.addEventListener("scroll", this.throttledOnScrollListener);
精细点2
在算何时触发调用load函数时，它的公式和我不一样，如下所示
let isToBottom = event.target.scrollTop + event.target.clientHeight - event.target.scrollHeight * percent === 0
也就是说，它有一个percent的乘积累积上去。之所以这样做的原因是：
image.png
这个库做得更好一点，用的百分比而不是固定数值。
后记
当然，这个库还有上拉刷新的功能，这里就不研究啦
参考文档：
https://segmentfault.com/a/1190000016197930
https://segmentfault.com/q/1010000003795357
