【前端】一个简易的下拉加载效果

业务场景

如图，content的高固定，list-item过多时展现滚动条。
content可以是body或者任意一个div。只要将期望产生滚动条的元素设置为content就行了。

实现方法

以该图片为例，实现下拉加载。

• 在还未拉动滚动条时，不将全部的list-item展示。
• 自定义展示多少个，比如上图，展示前3个就可以了。（能撑出滚动条，但又不全部加载完）
• 拖动滚动条，当到达底部时，加载剩余的N张图片。（N也是自定义）

一个例子

一开始只加载4张图片，滚动条到content底部时，加载一张图片知道没有图片可以加载。
在还有图片未加载的时候，底部显示“加载中。。。”，图片全部加载完毕时，显示“没有更多”。

滚动条到底部

需要用到三个属性：scrollTop，offsetHeight/clie