摘要：構造函數(shù)調用時，需要給它傳一個回調函數(shù)。當監(jiān)聽的元素進入可視區(qū)域或者從可視區(qū)域離開時，回調函數(shù)就會被調用。構造函數(shù)的返回值是一個觀察器實例。它是一個數(shù)組，每個成員都是一個門檻值，默認為，即交叉比例達到時觸發(fā)回調函數(shù)。

IntersectionObserve這個API，可能知道的人并不多(我也是最近才知道...)，這個API可以很方便的監(jiān)聽元素是否進入了可視區(qū)域。

test
box

上圖代碼中，.box元素目前并不在可視區(qū)域(viewport)內，如何監(jiān)聽它進入可視區(qū)域內？

傳統(tǒng)做法是：監(jiān)聽scroll事件，實時計算.box距離viewport的top值：

const box = document.querySelector(".box");
const viewHeight = document.documentElement.clientHeight;

window.addEventListener("scroll", () => {
  const top = box.getBoundingClientRect().top;
  
  if (top < viewHeight) {
    console.log("進入可視區(qū)域");
  }
});

然而scroll事件會頻繁觸發(fā)，因此我們還需要手動節(jié)流。

使用IntersectionObserve就非常方便了:

const box = document.querySelector(".box");
const intersectionObserver = new IntersectionObserver((entries) => {
  entries.forEach((item) => {
    if (item.isIntersecting) {
      console.log("進入可視區(qū)域");
    }
  })
});
intersectionObserver.observe(box);

IntersectionObserver API是異步的，不隨著目標元素的滾動同步觸發(fā)，所以不會有性能問題。

const io = new IntersectionObserver((entries) => {
  console.log(entries);
});

io.observe(dom);

調用IntersectionObserver時，需要給它傳一個回調函數(shù)。當監(jiān)聽的dom元素進入可視區(qū)域或者從可視區(qū)域離開時，回調函數(shù)就會被調用。

注意: 第一次調用new IntersectionObserver時，callback函數(shù)會先調用一次，即使元素未進入可視區(qū)域。

構造函數(shù)的返回值是一個觀察器實例。實例的observe方法可以指定觀察哪個 DOM 節(jié)點。

// 開始觀察
io.observe(document.getElementById("example"));

// 停止觀察
io.unobserve(element);

// 關閉觀察器
io.disconnect();

callback函數(shù)被調用時，會傳給它一個數(shù)組，這個數(shù)組里的每個對象就是當前進入可視區(qū)域或者離開可視區(qū)域的對象(IntersectionObserverEntry對象)

這個對象有很多屬性，其中最常用的屬性是：

target: 被觀察的目標元素，是一個 DOM 節(jié)點對象

isIntersecting: 是否進入可視區(qū)域

intersectionRatio: 相交區(qū)域和目標元素的比例值，進入可視區(qū)域，值大于0，否則等于0

調用IntersectionObserver時，除了傳一個回調函數(shù)，還可以傳入一個option對象，配置如下屬性：

threshold: 決定了什么時候觸發(fā)回調函數(shù)。它是一個數(shù)組，每個成員都是一個門檻值，默認為[0]，即交叉比例（intersectionRatio）達到0時觸發(fā)回調函數(shù)。用戶可以自定義這個數(shù)組。比如，[0, 0.25, 0.5, 0.75, 1]就表示當目標元素 0%、25%、50%、75%、100% 可見時，會觸發(fā)回調函數(shù)。

root: 用于觀察的根元素，默認是瀏覽器的視口，也可以指定具體元素，指定元素的時候用于觀察的元素必須是指定元素的子元素

rootMargin: 用來擴大或者縮小視窗的的大小，使用css的定義方法，10px 10px 30px 20px表示top、right、bottom 和 left的值

const io = new IntersectionObserver((entries) => {
  console.log(entries);
}, {
  threshold: [0, 0.5],
  root: document.querySelector(".container"),
  rootMargin: "10px 10px 30px 20px",
});

圖片懶加載的原理就是：給img標簽一個自定義屬性，用來記錄真正的圖片地址。默認img標簽只加載一個占位符。當圖片進入可視區(qū)域時，再把img的src屬性更換成真正的圖片地址。

const intersectionObserver = new IntersectionObserver((entries) => {
    entries.forEach((item) => {
        if (item.isIntersecting) {
            item.target.src = item.target.dataset.src;
            // 替換成功后，停止觀察該dom
            intersectionObserver.unobserve(item.target);
        }
    })
  }, {
      rootMargin: "150px 0px" // 提前150px進入可視區(qū)域時就加載圖片，提高用戶體驗
    });

const imgs = document.querySelectorAll("[data-src]");
imgs.forEach((item) => {
    intersectionObserver.observe(item)
});

前端頁面經(jīng)常有上報數(shù)據(jù)的需求，比如統(tǒng)計頁面上的某些元素是否被用戶查看，點擊。這時，我們就可以封裝一個Log組件，用于當元素進入可視區(qū)域時，就上報數(shù)據(jù)。
以React為例，我們希望：被Log組件包裹的元素，進入可視區(qū)域后，就向后臺發(fā)送{ appid: 1234, type: "news"}數(shù)據(jù)

 console.log("log")}
>
  
 console.log("news")}>
    
其他內容
  

import React, { Component } from "react";
import PropTypes from "prop-types";

class Log extends Component {
  static propTypes = {
    log: PropTypes.object
  };

  constructor(props) {
    super(props);
    this.io = null;
    this.ref = React.createRef();
  }

  componentDidMount() {
    this.io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          console.log("進入可視區(qū)域，將要發(fā)送log數(shù)據(jù)", this.props.log);
          sendLog(this.props.log);
          this.io.disconnect();
        }
      }
    );

    this.io.observe(this.ref.current);
  }

  componentWillUnmount() {
    this.io && this.io.disconnect();
  }

  render() {
    // 把log屬性去掉，否則log屬性也會渲染在div上 
    // 

    const { log, ...props } = this.props;
    return (
      

        {this.props.children}
      
    )
  }
}

export default Log

safari并不支持該API，因此為了兼容主流瀏覽器，我們需要引入polyfill
intersection-observer