Intersection Observer交叉觀察器範例解析

2023-02-20 06:00:51

前言

作為一個前端搬磚仔，偶爾會遇到關於視窗的問題...

其中就經常會遇到一些資料上報問題，比如某某元件是否被使用者看到了，如果看到就要上報資料，讓產品同學方便進行資料分析。

分析這個場景可以發現，必須要使用者看到了我才能上報，怎麼判斷使用者是否看到了這個元件呢？

傳統的方法是操作dom，通過這些資料或方法（offsetTop、scrollTop，getBoundingClientRect）來進行比較。

頻繁的對DOM狀態的計算，會造成不小的效能損耗，導致頁面卡頓。

接下來介紹一種我最近比較常用的新方式：Intersection Observer（交叉觀察器）

Intersection Observer 翻譯過來即交叉觀察器

主要是用於監聽目標元素與指定的元素視窗是否發生交叉

一句話總結：Intersection Observer API 提供了一種非同步檢測目標元素與祖先元素或 viewport 相交情況變化的方法。 – MDN

使用

一、利用IntersectionObserver建構函式建立一個觀察器範例

 <template>
  <div class="home"></div>
</template>
<script>
export default {
  name: "HomeView",
  mounted() {
    // 可見性發生變化後的回撥
    function callback() {
      console.log("觸發了");
    }
    // 交叉觀察器設定項
    let options = {};
    // 生成交叉觀察器
    const observer = new IntersectionObserver(callback);
  },
};
</script>

（callback是當元素可見比例超過指定閾值後會呼叫的一個回撥函數，options是一個可以用來設定 observer 範例的物件。）

輸出一下IntersectionObserver建構函式返回的範例

範例屬性：

root：root 屬性用來獲取當前 intersectionObserver 範例的根元素，用於判斷元素是否可見區域。

（注：這個既可以是 target 元素祖先元素也可以是指定 null 則使用瀏覽器視口做為容器 (root)。）

rootMargin：一個類似於margin的字串引數，就可以使用 root margin 來調整根矩形大小。

（注：由於使用Intersection Observer的過程中所有區域均被當做一個矩形看待，因此當我們需要調整元素邊界的矩形時，用 root margin 來調整大小。）

threshold：閾值，可以傳一個0 ~ 1的number，也可以傳個0 ~ 1範圍的number陣列。

（注：如果傳一個0 ~ 1的number，如0.5則說明，目標元素和root相交超過50%時，即二者重合超過目標元素的50%時，觸發回撥，如果是一個陣列[0.1, 0.2, 0.5]則分別在10% 20% 50%處觸發回撥）

二、觀察器範例監聽元素相交

<template>
  <div class="home">
    <div id="target" class="target-item"></div>
  </div>
</template>
<script>
export default {
  name: "HomeView",
  mounted() {
    // 可見性發生變化後的回撥
    function callback(data) {
      console.log("觸發了");
      console.log(data);
    }
    // 交叉觀察器設定項
    let options = {};
    // 生成交叉觀察器
    const observer = new IntersectionObserver(callback);
    // 獲取目標節點
    let target = document.getElementById("target");
    // 監聽目標元素
    observer.observe(target);
  },
};
</script>
<style scoped>
.home {
  height: 300vh;
}
.home .target-item {
  margin-top: 120vh;
  width: 20px;
  height: 20px;
  background: #000;
}
</style>

可以看到

通過捲動，可以不停監聽到觀察器的回撥。

三、觀察器回撥函數引數

看到在觀察器的回撥中是返回了一個物件的，修改原來的回撥函數，對應看看到底返回了啥？

export default {
  name: "HomeView",
  mounted() {
    // 可見性發生變化後的回撥
    function callback(data) {
      console.log("觸發了");
      data.map((item) => {
        // 目標元素的getBoundingClientRect的返回值。
        console.log(item.boundingClientRect);
        // 目標元素和根元素交叉區域的getBoundingClientRect的返回值。
        console.log(item.intersectionRatio);
        // 目標元素的可見比例，相當於二者重合了多少。
        console.log(item.intersectionRect);
        // 目標元素與根元素是否相交
        console.log(item.isIntersecting);
        // 根元素的getBoundingClientRect的返回值
        console.log(item.rootBounds);
        // 目標元素，是個dom
        console.log(item.target);
        // 從首次建立觀察者到觸發指定閾值發生交叉的時間
        console.log(item.time);
      });
    }
    // 交叉觀察器設定項
    let options = {
      threshold: 0.5,
    };
    // 生成交叉觀察器
    const observer = new IntersectionObserver(callback, options);
    // 獲取目標元素
    let target = document.getElementById("target");
    // 監聽目標元素
    observer.observe(target);
  },
};

可以看到控制檯輸出了下述內容：

可以看到返回了很多東西

其中就有我們熟悉的元素的getBoundingClientRect屬性。

回撥引數屬性：

boundingClientRect：物件，返回了目標元素的getBoundingClientRect的返回值。

intersectionRatio：物件，返回了目標元素和根元素交叉區域的getBoundingClientRect的返回值。

intersectionRect：數位，目標元素的可見比例，相當於二者重合了多少。

isIntersecting：布林值，目標元素與根元素相交是否相交

（如果相交，則返回 true ，若為true則說明至少到達了一個閾值，如果為false，說明目標元素在閾值範圍內不可見）

rootBounds：物件，返回了根元素的getBoundingClientRect的返回值。

target：物件，目標元素，是個dom

time：數位，從首次建立觀察者到觸發指定閾值發生交叉的時間

因此通過觀察器的回撥引數可以做到精確監聽目標的，通過這些引數可以更好的支援如下拉載入技術上報等場景，由於該屬性是原生api因此比起頻繁的操作dom會來的更絲滑。

四、觀察器的實體方法

通過上文我們已經說明了，如何使用交叉觀察器，並介紹了觀察器的範例屬性及回撥引數

下面說一下觀察器的實體方法！

    // 生成交叉觀察器
    const observer = new IntersectionObserver(callback, options);
    // 獲取目標元素
    let target = document.getElementById("target");
    // 監聽目標元素
    observer.observe(target);

可以看到監聽目標元素的時候用了 observe 方法，這就是觀察器的實體方法之一—— 監聽目標元素

觀察器的實體方法一共有四個

disconnect：停止對所有的目標元素的觀察

observe：監聽目標元素（可監聽多個）

takeRecords：返回一個IntersectionObserverEntry物件陣列(觀察器回撥引數就是這個)，裡面存放的各個目標元素的相交資訊

unobserve：停止對一個指定目標元素的觀察

通過程式碼來演示下上述方法：

<template>
  <div class="home">
    <div id="target1" class="target1-item"></div>
    <div id="target2" @click="unobserve()" class="target2-item"></div>
    <div style="margintop: 10px" @click="disconnect">disconnect</div>
  </div>
</template>
<script>
export default {
  name: "HomeView",
  data() {
    return {
      observer: {},
    };
  },
  mounted() {
    // 可見性發生變化後的回撥
    function callback(data) {
      console.log(data[0].target.id);
    }
    // 生成交叉觀察器
    this.observer = new IntersectionObserver(callback);
    // 獲取目標元素1
    let target1 = document.getElementById("target1");
    // 獲取目標元素2
    let target2 = document.getElementById("target2");
    // 監聽目標元素1
    this.observer.observe(target1);
    // 監聽目標元素2
    this.observer.observe(target2);
  },
  methods: {
    unobserve() {
      let target2 = document.getElementById("target2");
      // 停止監聽目標元素2
      this.observer.unobserve(target2)
    },
    disconnect() {
      // 停止監聽所有目標元素
      this.observer.disconnect();
    },
  },
};
</script>

程式碼效果如下所示：

可以看到一開始是監聽元素1和元素2，接著停止元素2的監聽，最後停止所有元素的監聽

以上就是Intersection Observer（交叉觀察器）的基本使用了。

五、總結

（1）利用IntersectionObserver建構函式建立一個觀察器範例，設定其回撥和基本引數

    // 可見性發生變化後的回撥
    function callback() {
    }
    // 生成交叉觀察器
    this.observer = new IntersectionObserver(callback);

（2）獲取目標元素節點，並監聽該元素

// 獲取目標元素
let target = document.getElementById("target");
// 監聽目標元素
this.observer.observe(target);

（3）回撥中處理相關邏輯

function callback(data) {
    console.log(data)
}

（4）觀察器使用結束後，取消對元素的監聽

// 停止觀察某個目標元素
observer.unobserve(target);
// 關閉監視器
observer.disconnect();

聊聊Intersection Observer各大瀏覽器的支援性截圖自

總的來說，這個還是適用於很多瀏覽器的。

各位前端朋友，如果以後有遇到下拉載入或資料上報的場景的話不妨使用一下這個Intersection Observer

確實是一個開發的好工具。

以上就是Intersection Observer交叉觀察器範例解析的詳細內容，更多關於Intersection Observer交叉觀察器的資料請關注it145.com其它相關文章！