列表如何做，看这一篇就够啦——触底加载、虚拟滚动与计算展现值

我们作为前端，平时遇到的一大类工作就是展现各种的数据，而列表就是其中一个基础而通用的形式，无论是像Google、百度这样的搜索引擎，到像Facebook、Twitter、掘金这样的用户社区，抑或是像美团、饿了么这样的本地服务，列表都是最为重要的展现形式之一。

触底加载

列表加载数据的交互形式主要有分页和触底加载两种形式。由于触底下载更适应于移动设备，同时对于类似推荐这种列表中的项目用个数不确定的情景更适应，因此触底加载成为了目前相对主流的选择。

触底加载的核心在于判断何时满足触底的条件。最直观的一种方法，就是在滚动的过程中，判断滚动元素的scrollTop+clientHeight是否已经接近或超过scrollHeight。回顾一下这几个属性的定义：

由于scroll事件触发非常频繁，为了提升性能，我们需要对回调函数进行throttle，从而降低执行的频度。同时，在调用后端接口等待结果的过程中，哪怕滚动位置再次满足了条件，也不需要再次发起接口请求。

我们提交了这份代码，看到如丝般顺滑的加载，内心很满意。直至隔壁座的后端小哥跑过来说，我把窗口最大化为啥底下没内容呀，我看接口没报错呀。

嗯～原来不只是滚动的时候，元素大小变化也需要监控到！那么该怎么做呢？浏览器提供了ResizeObserver接口，我们可以创建一个ResizeObserver并用它来监控我们的滚动元素（或者大多数情况下直接监控body元素），在元素尺寸变更时，依然根据scrollTop，clientHeight与scrollHeight的关系判断是否需要进行加载。

const resizeObserver = new ResizeObserver(entries => {
   
  if(entries[0].scrollTop + entries[0].clientHeight >= entries[0].scrollHeight) {
   
    // 加载更多
    throttledLoadMore();
  }
});
resizeObserver.observe(
  document.querySelector('.scroll')
);

除了判断滚动位置，触底的判断其实还有另一种方式。我们可以在列表的底部放置一个透明的footer，同时利用IntersectionObserver判断这个footer是否出现在可视区域内。这种方式就不用额外处理元素大小变化的问题了。

const intersectionObserver = new IntersectionObserver(entries => {
   
  // 如果footer不可见，就返回
  if (entries[0].intersectionRatio <= 0) {
   
    return;
  }
  // 加载更多
  throttledLoadMore();
});
intersectionObserver.observe(
  document.querySelector('.scrollerFooter')
);

相比于分页的形式，触底加载对数据一致性的要求更高，因为不