in view

in-view.js ？

當 DOM 元素進入或退出視窗時收到通知。一個小型（壓縮後約 1.9kb）、無依賴性、適用於 IE9+ 的 JavaScript 實用程式。

camwiegert.github.io/in-view

---

安裝

下載最新版本並將其包含在您的標記中或使用 npm 安裝：

npm install --save in-view

---

基本用法

透過視圖內，您可以註冊元素進入或退出視口時所呼叫的處理程序。每個處理程序接收一個元素，即進入或退出視口的元素，作為其唯一的參數。

 inView ( '.someSelector' )
    . on ( 'enter' , doSomething )
    . on ( 'exit' , el => {
        el . style . opacity = 0.5 ;
    } ) ; 

---

應用程式介面

in-view 為使用inView(<selector>)捕獲的每組元素維護一個單獨的處理程序註冊表。每個註冊表都公開相同的四種方法。 in-view 也公開了四個頂級方法。 （ is 、 offset 、 threshold 、 test ）。

inView(<選擇器>).on(<事件>, <處理程序>)

向event selector選擇的元素註冊一個處理程序。視圖中發出的唯一事件是'enter'和'exit' 。

 inView ( '.someSelector' ) . on ( 'enter' , doSomething ) ;

inView(<選擇器>).once(<事件>, <處理程序>)

向event selector選擇的元素註冊一個處理程序。註冊過once處理程序只會被呼叫一次。

 inView ( '.someSelector' ) . once ( 'enter' , doSomething ) ;

inView.is(<元素>)

檢查element是否在視窗中。

 inView . is ( document . querySelector ( '.someSelector' ) ) ;
// => true

inView.offset(<偏移>)

預設情況下，如果某些內容破壞了視口的任何邊緣，則視圖中會考慮視口中的某些內容。這可用於設定距該邊緣的偏移量。例如，如果元素將視口的任何邊緣打破至少100像素，則偏移量100將考慮視口中的元素。 offset可以是正整數或負整數。

 inView . offset ( 100 ) ;
inView . offset ( - 50 ) ;

也可以透過傳遞物件來設定每個方向的偏移量。

 inView . offset ( {
    top : 100 ,
    right : 75 ,
    bottom : 50 ,
    left : 25
} ) ;

inView.threshold(<閾值>)

設定元素在視窗中需要可見的高度和寬度的比率。預設為0 ，表示任意數量。閾值0.5或1將要求元素的高度和寬度分別有一半或全部可見。 threshold必須是0到1之間的數字。

 inView . threshold ( 0 ) ;
inView . threshold ( 0.5 ) ;
inView . threshold ( 1 ) ;

inView.test(<測試>)

使用自訂函數覆寫視圖中的預設可見性標準。此函數將接收元素和選項物件作為其僅有的兩個參數。當元素應被視為可見時傳回true ，否則傳回false 。

 inView . test ( ( el , options ) => {
    // ...
} ) ;

inView(<選擇器>).check()

手動檢查selector選擇的元素的狀態。預設情況下，所有註冊表都會在window的scroll 、 resize和load事件上進行檢查。

 inView ( '.someSelector' ) . check ( ) ;

inView(<選擇器>).emit(<事件>, <元素>)

手動為任何單一元素發出event 。

 inView ( '.someSelector' ) . emit ( 'exit' , document . querySelectorAll ( '.someSelector' ) [ 0 ] ) ; 

---

瀏覽器支援

in-view 支援所有現代瀏覽器和 IE9+。

需要注意的是，in-view 使用 MutationObserver 來檢查 DOM 突變後註冊元素的可見性。如果您在 IE9-10 中需要該功能，請考慮使用 polyfill。

---

表現

任何監視滾動事件的庫都存在降低頁面效能的風險。為了緩解這個問題，目前， in-view 僅在每個window的load 、 resize和scroll事件上註冊一個受限（最多每100 毫秒一次）的事件偵聽器，並使用這些事件對每個註冊表運行檢查。

使用 IntersectionObserver

有一個新興的瀏覽器 API IntersectionObserver ，旨在為開發人員提供一種檢查 DOM 元素可見性的高效能方法。展望未來，in-view 的目標是在受支援時委託給IntersectionObserver ，僅在必要時才回退到輪詢。

---

許可麻省理工學院