可以监测某个元素是否进入 视口 viewport（即用户是否能看到这个元素）的一个可靠且高性能的接口。

作用

  • 图片懒加载
    • 当图片滚动到可见时才进行加载
  • 内容无限滚动
    • 也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
  • 检测广告的曝光情况
    • 为了计算广告收益，需要知道广告元素的曝光情况

  • 在用户看见某个区域时执行任务或播放动画

    传统实现方法

  • 对 scroll 事件绑定处理函数

  • 调用目标元素的 getBoundingClientRect()

    • 得到目标元素对应 viewport 左上角坐标，判断是否在 viewport

      缺点

      scroll 事件密集发生（事件监听和调用都在主线程上运行），产生大量计算，容易造成性能问题。这种检测方式极其怪异且不优雅。

      使用方法

      1. var options = {
      2. root: document.querySelect('#scrollArea'),
      3. rootMargin: '0px',
      4. threshold: 1.0
      5. }
      6. var observer = new IntersectionObserver(callback, option);

      callback

      回调函数一般会触发两次，一次是目标元素刚进入根元素，别一次是完全离开根元素。
      回调函数会在主线程中执行。

      参数

  • entries IntersectionObserverEntry[] 对象数组

    • IntersectionObserverEntry
      • boundingClinentRect 目标元素的矩形区域的信息
      • intersetionRatio 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
      • intersectioniRect 目标元素与视口（或根元素）的交叉区域的信息
      • isIntersecting
      • rootBounds 根元素的矩形区域的信息，可以用getBoundingClientRect()方法得到，如果没有根元素（即直接相对于视口滚动），则返回null
      • target 被观察的目标元素，是一个 DOM 节点对象
      • time 监听器元素的持续时间

  • observer

    Intersection observer options

    options 对象有以下的属性

  • root 根元素 （目标元素的父级元素）

    • 用于检查目标的可见标。
    • 默认为 viewport
  • rootMargin 根元素外边距 （类似 CSS 的 margin 属性，可以设置为 ‘10px 20px 30px 40px’）
    • 用于控制根元素每一边的收缩或扩张
    • 默认为 0
  • threshold 阈值 (可以设置 number 或 number[])
    • 目标元素出现多少在根元素可见时，回调函数才会被执行
    • 0 为一出现像素就立即触发回调，1.0 为目标元素完全出现在要根元素才触发回调
    • 设置为数组时，是当出现数组的某一值时就触发一次回调函数
    • 默认为 0

      兼容性

      image.png
      如果还有 IE 的话，还是用传统实现方法