IntersectionObserver 与无限滚动列表

无限滚动在实际项目中用到很多，比较在vipkid 数字图书馆的的书库这个业务中，就用到滚动加载，如下视频所示

正常思路是，我们监听scroll事件，当滚动条滑到底部的时候，触发加载，请求数据，将新数据插入尾部。

这里面，我们会碰到两个问题，

• 1.一个是scroll 事件的触发，会触发的非常频繁，
• 2.dom节点会越来越多

作为专业的前端工程师，一般都会考虑这两个问题。scroll事件的触发，在这里我们可以使用throttle来保证每隔一定时间来进行. 此处我们会加上passive为true l来明确告诉浏览器，事件处理程序不会调用preventDefault来阻止默认行为。

关于在滑动过程中有可能导致的强制重排，我们假设都考虑到，我们的代码估计如下所示

<script>
  window.addEventListener("scroll",
    throttle(() => {}, 250), {
      passive: false
    })
</script>

但是再怎样，scroll还会频繁的触发，1秒钟执行4次。chrome74 起提供了IntersectionObserver 这个API ,我们可以使用这个api 来实现无限加载。

IntersectionObserver接口 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法 . 就是说可以这个接口可以检测 某个元素是否进入可视区域或退出可视区域，我们可以根据这个特点，实现无限滚动加载。