滚动条知识点之一： infinite scroll

1. Infinite Scroll

   这个业务场景主要是在移动开发。我们的移动项目用的框架是ionic3，按理说ionic3本身提供了infinite scroll的控件，先放一张图以及Ionic3官网文档说明一下什么是infinite scroll.

   **The Infinite Scroll allows you to perform an action when the user scrolls a specified distance from the bottom or top of the page.
   The expression assigned to the infinite event is called when the user scrolls to the specified distance. When this expression has finished its tasks, it should call the complete() method on the infinite scroll instance**

需要注意的是文档中描述的滚动条指的是整个page的滚动条. 页面中如果某个子元素比如内部的一个div中有滚动条是不会触发infinite scroll的。而这也就是我们后来遇到的问题之所在。

由于业务需求我们又引入了一个第三方表格库Dhtmlx Grid. 具体的来龙去脉可以参照我之前的一篇吐槽文章：偷偷吐槽：为什么表格结构不是移动优先（Why datatable is not mobile first style）

Infinite scroll对应的其实是分页需求，这个第三方库只有像传统的web端一样通过设置底部栏分页按钮，这个太不移动了，所以我只好自己写一个模拟的infinte scroll小控件。具体的html和css实现方式我就不说了，不是本文的重点。

重点来了:

if (gridEle.offsetHeight + gridEle.scrollTop === gridEle.scrollHeight) {
    // load more data from server...
}

通过MDN的图已经表达的很清楚了，这是个很小的知识点，我之所以想记下来，主要是想要通过业务场景重新梳理一下，加深一下记忆，以备以后万一有点想不起来，不用再搜别人的帖子。来这里猫一眼即可：）