看到蛮多写IntersectionObserver的博客的，但是感觉里面关键部分都介绍的模棱两可，所以我来简单说说这个。至于什么是IntersectionObserver，官网上有 IntersectionObserver，我就不去一一阐述了，下面说最关键的点和使用场景！

    new IntersectionObserver(         function (entries) {           // entries[0].isIntersecting         },         {           rootMargin: "0px 0px 0px 0px"         }       )

关键点

设置上边距，当前元素的下边框监测会更早出现更晚消失。

设置下边距，当前元素的上边框监测会更早出现更晚消失。

并且rootMargin必须要设置px或者百分比，这百分比是相对视口高度来说的，所以说一般建议使用px，如："30px 0px 0px 0px" 或者 "10% 0px 0px 0px"，必须要带px，不能只写数值否则无效。
 

场景

有预懒加载的地方大概率会使用到IntersectionObserver，比如向上滑动时，如果图片或者其他dom比较多时，当滑到才渲染可能来不及，所以需要提前一段距离就开始渲染

示例源码

                                   
     
     
     初始化