如何判斷元素是否在可視區(qū)域中IntersectionObserver

本文小編為大家詳細介紹“如何判斷元素是否在可視區(qū)域中IntersectionObserver”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“如何判斷元素是否在可視區(qū)域中IntersectionObserver”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

應(yīng)用場景

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

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

使用

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

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

現(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。然后我們想實現(xiàn)懶加載就需要用到IntersectionObserver這個API

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

   const li = ref(null)

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

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

callback

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

entries

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

observer

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

  const intersectionObserver = new IntersectionObserver((entries) => {
  // 如果 intersectionRatio 為 0，則目標在可視區(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的最后一個組件進行監(jiān)聽。
  intersectionObserver.observe(li.value[li.value.length - 1])
})

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

由此可見IntersectionObserver是多么的方便，而且還節(jié)省性能。

讀到這里，這篇“如何判斷元素是否在可視區(qū)域中IntersectionObserver”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。