如何判斷元素是否在可視區域中IntersectionObserver

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

應用場景

去實現懶加載、無限滾動等等操作。

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

使用

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

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

現在就用一個例子演示：

 <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])

我這里創建了一個ul 里面有很多小（10個）li。然后我們想實現懶加載就需要用到IntersectionObserver這個API

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

   const li = ref(null)

然后我們創建IntersectionObserver實例對象。 語法

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

callback

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

entries

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

observer

被調用的IntersectionObserver實例。

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

這樣就能夠實現一個懶加載的效果。

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

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