Infinity scroller组件

无尽滚动在互联网上到处都有应用。Google Music的艺术家列表是一个，Facebook的时间线是一个，Tweeter的话题列表也是一个。当你向下滚动，新的内容就神奇的“无中生有”了。这是一个得到广泛赞扬的、非常好的用户体验。

首先我们先来看一下无尽滚动组件要解决的问题是什么？答案是控制页面DOM元素的数量，使其保持在较低的水平。

我们知道大量的DOM元素会导致页面性能的下降，当我们的需求中出现了要展示“无尽”列表的时候不可能任由DOM元素递增，这看起来并没有什么困难的地方，无非就是将视野范围呢的DOM元素remove掉。如果问题真有想象的那么简单，我估计90%的程序员都要失业了，接下来我们就讨论一下实现该组件所要面临的其他问题：

数据请求的时机
即在什么情况下触发数据的异步请求
元素的删除时机
即在什么情况下触发无用元素的删除
元素删除后导致高度塌陷，如何确保视图范围内的元素位置保持不动
如何实现正常的滚动效果
因为正在展示的数据其实只是数据列表的一部分，如何实现列表的无尽滚动效果是一个要解决的问题。
当快速滚动时，不希望屏幕白屏
由于涉及到异步请求数据，在这期间页面会出现白屏的情况，该问题如何解决呢？
那么接下来我就从解答以上问题的过程中来说明该如何一步一步的构造无尽滚动组件。

1. 数据请求时机

假设当前要展示的数据列表是 items_ = [{},]的形式，我们用firstAttachedItem_ 和 lastAttachedItem_ 表示当前页面上展示的列表的起始序号以及结束序号，用loadedItems_表示当前已经通过异步接口请求到的数据长度

if(_lastAttachedItem_ < loadedItems_){
    //fetch() 异步数据获取
}

2.元素的删除时机

如上，我们用firstAttachedItem_ 和 lastAttachedItem_ 表示当前页面上展示的列表的起始序号以及结束序号，也就是说在滚动的过程中将该区间以外的序号所对应的DOM节点remove掉即可

for (i = 0; i < items_.length; i++) {
     // Skip the items which should be visible.      
     if (i == firstAttachedItem_) {
       i = this.lastAttachedItem_ - 1;
       continue;
     }           
     if (items_[i].node) {
       unusedNodes.push(this.items_[i].node);
     }
     items_[i].node = null;
   } 
   // Remove all unused nodes
   while (unusedNodes.length) {
     scroller_.removeChild(unusedNodes.pop());
   }

3.元素删除后高度处理

一般情况下我们知道，在一个列表中我们将前面的DOM元素删除后，后面的元素会自动向上移动，但是这个现象并不是我们所需要的，我们想要的是无关元素删除后在视觉上是无感知的，当然可以有多种方式实现这种效果，我们考虑到滚动过程本身对性能的影响，采取了绝对定位+transform的形式来解决该问题，具体思路如下:

.container{
 margin: 0;
 padding: 0;
 overflow-x: hidden;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 width: 100%;
 height: 100%;
 position: absolute;
 box-sizing: border-box;
 contain: layout;
 will-change: transform;
}/********container为滚动元素容器，item为列表数据，其在container里面滚动*********/
.item{
   position:absolute;
}

   1
   2
   3

这里通过js对其进行布局，控制每个item的位置。这样一来即使元素被删除了该元素所在的位置还被占着，不会造成高度塌陷，另一方面absolute定位的元素在重新渲染时代价也相对较小，有利于刷新效率。

4. 正常滚动效果实现

由于我们正在展示的数据只是数据列表的一个子集，为了实现自由的滚动效果需要我们认为的增加容器的可滚动距离。

举个例子：如果页面上最后一个item的样式被设置为transform:translate(0,1000px)，那么整个容器的最大可滚动距离就是1000px+最后一个item的高度。

基于此我们可以额外添加一个哨兵元素，将其样式设置为transform:translate(0,x+SCROLL_RUNWAY)，那么SCROLL_RUNWAY就是我们为容器添加的额外的滚动距离，有了这个滚动距离，即使没有要展示的数据，列表也是可以自由滚动的。

5. 白屏问题

这里我们引入了墓碑元素的概念

墓碑元素

为了防止在快速滚动时出现白屏问题，我们使用墓碑元素进行占位，当获取到异步数据后进行展示的更新，在更新的时候我们还可以添加过渡效果来优化体验。

总结

这里虽然用很简单的语言对构造无尽滚动组件的过程做了介绍，但是不写代码仍然体会不到问题的复杂度，所以看完以上介绍最好再分析一遍源码。