欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Intersection?Observer交叉觀察器示例解析

 更新時間：2023年02月17日 10:40:32   作者：完錘子  
這篇文章主要為大家介紹了Intersection?Observer交叉觀察器示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

作為一個前端搬磚仔，偶爾會遇到關(guān)于視窗的問題...

其中就經(jīng)常會遇到一些數(shù)據(jù)上報問題，比如某某組件是否被用戶看到了，如果看到就要上報數(shù)據(jù)，讓產(chǎn)品同學方便進行數(shù)據(jù)分析。

分析這個場景可以發(fā)現(xiàn)，必須要用戶看到了我才能上報，怎么判斷用戶是否看到了這個組件呢？

傳統(tǒng)的方法是操作dom，通過這些數(shù)據(jù)或方法（offsetTop、scrollTop，getBoundingClientRect）來進行比較。

頻繁的對DOM狀態(tài)的計算，會造成不小的性能損耗，導致頁面卡頓。

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

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

主要是用于監(jiān)聽目標元素與指定的元素視窗是否發(fā)生交叉

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

使用

一、利用IntersectionObserver構(gòu)造函數(shù)創(chuàng)建一個觀察器實例

 <template>
  <div class="home"></div>
</template>
<script>
export default {
  name: "HomeView",
  mounted() {
    // 可見性發(fā)生變化后的回調(diào)
    function callback() {
      console.log("觸發(fā)了");
    }
    // 交叉觀察器配置項
    let options = {};
    // 生成交叉觀察器
    const observer = new IntersectionObserver(callback);
  },
};
</script>

（callback是當元素可見比例超過指定閾值后會調(diào)用的一個回調(diào)函數(shù)，options是一個可以用來配置 observer 實例的對象。）

輸出一下IntersectionObserver構(gòu)造函數(shù)返回的實例

實例屬性：

root：root 屬性用來獲取當前 intersectionObserver 實例的根元素，用于判斷元素是否可見區(qū)域。

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

rootMargin：一個類似于margin的字符串參數(shù)，就可以使用 root margin 來調(diào)整根矩形大小。

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

threshold：閾值，可以傳一個0 ~ 1的number，也可以傳個0 ~ 1范圍的number數(shù)組。

（注：如果傳一個0 ~ 1的number，如0.5則說明，目標元素和root相交超過50%時，即二者重合超過目標元素的50%時，觸發(fā)回調(diào)，如果是一個數(shù)組[0.1, 0.2, 0.5]則分別在10% 20% 50%處觸發(fā)回調(diào)）

二、觀察器實例監(jiān)聽元素相交

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

可以看到

通過滾動，可以不停監(jiān)聽到觀察器的回調(diào)。

三、觀察器回調(diào)函數(shù)參數(shù)

看到在觀察器的回調(diào)中是返回了一個對象的，修改原來的回調(diào)函數(shù)，對應看看到底返回了啥？

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

可以看到控制臺輸出了下述內(nèi)容：

可以看到返回了很多東西

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

回調(diào)參數(shù)屬性：

boundingClientRect： 對象，返回了目標元素的getBoundingClientRect的返回值。

intersectionRatio：對象，返回了目標元素和根元素交叉區(qū)域的getBoundingClientRect的返回值。

intersectionRect： 數(shù)字，目標元素的可見比例，相當于二者重合了多少。

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

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

rootBounds： 對象，返回了根元素的getBoundingClientRect的返回值。

target：對象，目標元素，是個dom

time： 數(shù)字，從首次創(chuàng)建觀察者到觸發(fā)指定閾值發(fā)生交叉的時間

因此通過觀察器的回調(diào)參數(shù)可以做到精確監(jiān)聽目標的，通過這些參數(shù)可以更好的支持如下拉加載技術(shù)上報等場景，由于該屬性是原生api因此比起頻繁的操作dom會來的更絲滑。

四、觀察器的實例方法

通過上文我們已經(jīng)說明了，如何使用交叉觀察器，并介紹了觀察器的實例屬性及回調(diào)參數(shù)

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

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

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

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

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

observe：監(jiān)聽目標元素（可監(jiān)聽多個）

takeRecords：返回一個IntersectionObserverEntry對象數(shù)組(觀察器回調(diào)參數(shù)就是這個)，里面存放的各個目標元素的相交信息

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() {
    // 可見性發(fā)生變化后的回調(diào)
    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");
    // 監(jiān)聽目標元素1
    this.observer.observe(target1);
    // 監(jiān)聽目標元素2
    this.observer.observe(target2);
  },
  methods: {
    unobserve() {
      let target2 = document.getElementById("target2");
      // 停止監(jiān)聽目標元素2
      this.observer.unobserve(target2)
    },
    disconnect() {
      // 停止監(jiān)聽所有目標元素
      this.observer.disconnect();
    },
  },
};
</script>

代碼效果如下所示：

可以看到一開始是監(jiān)聽元素1和元素2，接著停止元素2的監(jiān)聽，最后停止所有元素的監(jiān)聽

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

五、總結(jié)

（1）利用IntersectionObserver構(gòu)造函數(shù)創(chuàng)建一個觀察器實例，設(shè)置其回調(diào)和基本參數(shù)

    // 可見性發(fā)生變化后的回調(diào)
    function callback() {
    }
    // 生成交叉觀察器
    this.observer = new IntersectionObserver(callback);

（2）獲取目標元素節(jié)點，并監(jiān)聽該元素

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

（3）回調(diào)中處理相關(guān)邏輯

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

（4）觀察器使用結(jié)束后，取消對元素的監(jiān)聽

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

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

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

各位前端朋友，如果以后有遇到下拉加載或數(shù)據(jù)上報的場景的話不妨使用一下這個Intersection Observer

確實是一個開發(fā)的好工具。

以上就是Intersection Observer交叉觀察器示例解析的詳細內(nèi)容，更多關(guān)于Intersection Observer交叉觀察器的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論