IntersectionObserverであそぼう

WebkitにもIntersectionObserverが入るということで

webkit.org

注：本エントリのサンプルは未対応ブラウザのある機能を使っています。

IntersectionObserverとは

Intersection: 交差点

IntersectionObserverがobserveするのはHTMLエレメントとviewportの交差です。 例えば画面をスクロールしていって目当てのエレメントが見えてきたらイベントを発火、という便利な使い方ができるAPIです。

以下のサンプルではグレーの四角が半分まで見えてるかどうかをobserveさせメッセージを切り替えています。

See the Pen IntersectionObserver-1 by seihmd (@seihmd) on CodePen.

詳しいことはMDNで

developer.mozilla.org

何がいいのか

目的のエレメントの位置を取得してscrollイベントを検知してscroll位置とエレメント位置を比較して...という苦行をしなくて良くなります。 パフォーマンス的にも当然◎

サンプル

スクロールしてきたらアニメーション

See the Pen IntersectionObserver-2 by seihmd (@seihmd) on CodePen.

画像の遅延ローディング

See the Pen IntersectionObserver-2 by seihmd (@seihmd) on CodePen.