IntersectionObserver

這是個(gè)還在草案中的API，不過大部分瀏覽器均已實(shí)現(xiàn)（除了IE）。先看下MDN中的介紹：

IntersectionObserver接口提供了一種異步觀察目標(biāo)元素與祖先元素或頂級文檔viewport的交集中的變化的方法。祖先元素與視窗viewport被稱為根(root)。

目標(biāo)元素與視窗

不知大家有沒有發(fā)現(xiàn)隨著網(wǎng)頁發(fā)展，對檢測某個(gè)（些）元素是否出現(xiàn)在可視窗相關(guān)的需求越來越多了？比如：

• 當(dāng)頁面滾動(dòng)時(shí)，懶加載圖片或其他內(nèi)容。
• 實(shí)現(xiàn)“可無限滾動(dòng)”網(wǎng)站，也就是當(dāng)用戶滾動(dòng)網(wǎng)頁時(shí)直接加載更多內(nèi)容，無需翻頁。
• 對某些元素進(jìn)行埋點(diǎn)曝光
• 滾動(dòng)到相應(yīng)區(qū)域來執(zhí)行相應(yīng)動(dòng)畫或其他任務(wù)。

一直以來，檢測元素的可視狀態(tài)或者兩個(gè)元素的相對可視狀態(tài)都不是件容易事，大部分解決辦法并不完全可靠，實(shí)現(xiàn)方式很丑陋，也極易拖慢整個(gè)網(wǎng)站的性能。

IntersectionObserver正因此而生

API解讀：

1.用法

是以new的形式聲明一個(gè)對象，接收兩個(gè)參數(shù)callback和options

const io = new IntersectionObserver(callback, options)

io.observe(DOM)

const options = {
  root: null,
  rootMargin: 0,
  thresholds: 1,
}
const io = new IntersectionObserver(entries => {
  console.log(entries)
  // Do something
}, options)

2.callback

callback是添加監(jiān)聽后，當(dāng)監(jiān)聽目標(biāo)發(fā)生滾動(dòng)變化時(shí)觸發(fā)的回調(diào)函數(shù)。接收一個(gè)參數(shù)entries，即IntersectionObserverEntry實(shí)例。描述了目標(biāo)元素與root的交叉狀態(tài)。具體參數(shù)如下：

表格中加粗的兩個(gè)屬性是比較常用的判斷條件：isIntersecting和intersectionRatio

IntersectionObserverEntry打印的值

3.options

options是一個(gè)對象，用來配置參數(shù)，也可以不填。共有三個(gè)屬性，具體如下：

4.方法

介紹了這么多配置項(xiàng)及參數(shù)，差點(diǎn)忘了最重要的，IntersectionObserver有哪些方法？
如果要監(jiān)聽某些元素，則必須要對該元素執(zhí)行一下observe

應(yīng)用：

1.圖片懶加載

const imgList = [...document.querySelectorAll('img')]

var io = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    // isIntersecting是一個(gè)Boolean值，判斷目標(biāo)元素當(dāng)前是否可見
    if (item.isIntersecting) {
      item.target.src = item.target.dataset.src
      // 圖片加載后即停止監(jiān)聽該元素
      io.unobserve(item.target)
    }
  })
}, {
  root: document.querySelector('.root')
})

// observe遍歷監(jiān)聽所有img節(jié)點(diǎn)
imgList.forEach(img => io.observe(img))

2.埋點(diǎn)曝光

假如有個(gè)需求，對一個(gè)頁面中的特定元素，只有在其完全顯示在可視區(qū)內(nèi)時(shí)進(jìn)行埋點(diǎn)曝光。

const boxList = [...document.querySelectorAll('.box')]

var io = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    // intersectionRatio === 1說明該元素完全暴露出來，符合業(yè)務(wù)需求
    if (item.intersectionRatio === 1) {
      // 。。。 埋點(diǎn)曝光代碼
      io.unobserve(item.target)
    }
  })
}, {
  root: null,
  threshold: 1, // 閥值設(shè)為1，當(dāng)只有比例達(dá)到1時(shí)才觸發(fā)回調(diào)函數(shù)
})

// observe遍歷監(jiān)聽所有box節(jié)點(diǎn)
boxList.forEach(box => io.observe(box))

3.滾動(dòng)動(dòng)畫

用上面的例子隨便寫了一個(gè)，太丑勿噴

IntersectionObserver.gif

總之，這是一個(gè)相當(dāng)方便好用的API！

掘金傳送門：https://juejin.im/post/5d11ced1f265da1b7004b6f7