快捷導(dǎo)航

面試判斷元素是否在可視區(qū)域中IntersectionObserver詳解

更新時間：2023年03月09日 11:16:17 作者：收破爛的來了

這篇文章主要為大家介紹了判斷元素是否在可視區(qū)域中IntersectionObserver面試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

我們面試中常見的一個問題，如何判斷元素是否在可視區(qū)域中（即視口區(qū)域）？第一時間想到的肯定就是通過，offsetHeight、clientHeight、scrollHeight、scrrollTop、window.innerHeight等等東西來計(jì)算。而IntersectionObserver更好的幫我們解決了這個問題。

應(yīng)用場景

去實(shí)現(xiàn)懶加載、無限滾動等等操作。

例：使用到的場景就是大量數(shù)據(jù)展示問題，一次性渲染大量數(shù)據(jù)，肯定會出現(xiàn)渲染性能問題。如：一個select選擇框，有大量數(shù)據(jù)，而視口展示的內(nèi)容只有其中一小小部分。我們只需要先渲染視口展示的內(nèi)容，當(dāng)用戶滾動的時候，再渲染剩下的數(shù)據(jù)。這也是為什么在面試中要問這個問題。

使用

先放鏈接IntersectionObserver - Web API 接口參考 | MDN (mozilla.org)

IntersectionObserver 接口（從屬于 Intersection Observer API）提供了一種異步觀察目標(biāo)元素與其祖先元素或頂級文檔視口（viewport）交叉狀態(tài)的方法。其祖先元素或視口被稱為根（root）

當(dāng)一個 IntersectionObserver 對象被創(chuàng)建時，其被配置為監(jiān)聽根中一段給定比例的可見區(qū)域。一旦 IntersectionObserver 被創(chuàng)建，則無法更改其配置，所以一個給定的觀察者對象只能用來監(jiān)聽可見區(qū)域的特定變化值；然而，你可以在同一個觀察者對象中配置監(jiān)聽多個目標(biāo)元素。

現(xiàn)在就用一個例子演示：

 <ul>
      <li ref="li" v-for="(item, index) in lis" :key="index">{{ item }}</li>
    </ul>
const lis = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

我這里創(chuàng)建了一個ul 里面有很多?。?0個）li。然后我們想實(shí)現(xiàn)懶加載就需要用到IntersectionObserver這個API

第一步：先要獲取需要監(jiān)聽元素的DOM，那我們這里需要獲取滾動條數(shù)據(jù)的最后一個元素，也就是：li.value[li.value.length - 1]（即li的最后一個DOM元素）。

   const li = ref(null)

然后我們創(chuàng)建IntersectionObserver實(shí)例對象。語法

var observer = new IntersectionObserver(callback[, options]); 這里有幾個參數(shù)解釋：

callback

當(dāng)元素可見比例超過指定閾值后，會調(diào)用一個回調(diào)函數(shù)，此回調(diào)函數(shù)接受兩個參數(shù)：

entries

一個IntersectionObserverEntry對象的數(shù)組，每個被觸發(fā)的閾值，都或多或少與指定閾值有偏差。

observer

被調(diào)用的IntersectionObserver實(shí)例。

  const intersectionObserver = new IntersectionObserver((entries) => {
  // 如果 intersectionRatio 為 0，則目標(biāo)在可視區(qū)域之外，
  //直接return
  if (entries[0].intersectionRatio <= 0) return
  //停止在前一個DOM的監(jiān)聽。
  intersectionObserver.disconnect(li.value[li.value.length - 1])
  //如過在可視區(qū)域之內(nèi)，則我們添加數(shù)據(jù)。
  lis.push(...[1, 2, 3, 4, 5, 6])
  //更新監(jiān)聽的DOM
  intersectionObserver.observe(li.value[li.value.length - 1])
  console.log('Loaded new items')
})
onMounted(() => {
  //這里對li的最后一個組件進(jìn)行監(jiān)聽。
  intersectionObserver.observe(li.value[li.value.length - 1])
})

這樣就能夠?qū)崿F(xiàn)一個懶加載的效果。