我們做一些動(dòng)畫效果的時(shí)候可以用jq來(lái)判斷滾動(dòng)的距離，根據(jù)元素高度和距離頂部的高度判斷元素是否進(jìn)入可視區(qū)域中，比較方便的同時(shí)但由于必須一直處于監(jiān)聽(tīng)狀態(tài)可能會(huì)對(duì)瀏覽器性能造成影響，于是我發(fā)現(xiàn)這樣一款可以用來(lái)監(jiān)聽(tīng)是否進(jìn)入頁(yè)面中的api--IntersectionObserver。

  首先我們以new的形式聲明一個(gè)對(duì)象，接收兩個(gè)參數(shù)callback和option，callback就是當(dāng)開(kāi)啟監(jiān)聽(tīng)后發(fā)生滾動(dòng)時(shí)候的回調(diào)函數(shù)，它的參數(shù)是一個(gè)數(shù)組，每個(gè)成員都是一個(gè)IntersectionObserverEntry對(duì)象。

  另一個(gè)參數(shù)option是配置對(duì)象，他決定callback的判定條件，他有三個(gè)參數(shù)，root，rootMargin，，threshold。

  root指定根元素，rootMargin可以設(shè)定元素外邊距，threshold指的是可見(jiàn)區(qū)域的占比。

  Io.observe()開(kāi)始監(jiān)聽(tīng)一個(gè)元素。

  如下我們看一個(gè)例子

  這里我們監(jiān)聽(tīng)id為輪播的元素

  以下就是entries的數(shù)據(jù)

  當(dāng)監(jiān)聽(tīng)元素出現(xiàn)在瀏覽器可視區(qū)域內(nèi)部，可以看到isIntersecting的值變?yōu)榱藅rue，jq也正常運(yùn)行。