in viewダウンロード - in viewソースコードのダウンロード

in view

その他のソースコード

1.0.0

ダウンロード

in-view.js ?

DOM 要素がビューポートに出入りするときに通知を受け取ります。 IE9+ 用の小規模 (gzip 圧縮された最大 1.9 kb)、依存関係のない JavaScript ユーティリティ。

camwiegert.github.io/in-view

インストール

最新リリースをダウンロードしてマークアップに含めるか、npm を使用してインストールします。

npm install --save in-view

基本的な使い方

インビューを使用すると、要素がビューポートに出入りするときに呼び出されるハンドラーを登録できます。各ハンドラーは、ビューポートに出入りする 1 つの要素を唯一の引数として受け取ります。

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

API

in-view はinView(<selector>)でキャプチャされた要素のセットごとに個別のハンドラーレジストリを維持します。各レジストリは同じ 4 つのメソッドを公開します。 in-view は 4 つのトップレベルメソッドも公開します。 ( is 、 offset 、 threshold 、 test )。

inView(<セレクター>).on(<イベント>, <ハンドラー>)

eventのselectorで選択した要素にハンドラを登録します。ビュー内で発行されるイベントは'enter'と'exit'だけです。

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

inView(<セレクター>).once(<イベント>, <ハンドラー>)

eventのselectorで選択した要素にハンドラを登録します。 onceに登録されたハンドラは 1 回だけ呼び出されます。

 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(<テスト>)

ビュー内のデフォルトの可視性基準をカスタム関数でオーバーライドします。この関数は、要素とオプションオブジェクトを 2 つの引数のみとして受け取ります。要素が可視であるとfalseれる必要がある場合は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 で必要な機能である場合は、ポリフィルの使用を検討してください。

パフォーマンス

スクロールイベントを監視するライブラリには、ページのパフォーマンスが低下するリスクがあります。これを軽減するために、現在、 in-view は、 windowのload 、 resize 、 scrollイベントのそれぞれに単一の調整された(最大100msに1回)イベントリスナーのみを登録し、それらを使用して各レジストリのチェックを実行します。

IntersectionObserver の利用

新しいブラウザー API IntersectionObserverは、DOM 要素の可視性をチェックする効率的な方法を開発者に提供することを目的としています。今後、インビューはサポートされている場合はIntersectionObserverに委任し、必要な場合にのみポーリングにフォールバックすることを目指します。

MITライセンス

拡大する

追加情報