IntersectionObserverを使用すると実装が簡単に!Vue.jsでスクロールイベントをトリガーする方法

Webページやスマホアプリにスクロールのアニメーションを実装したり、特定の地点までスクロールしたらイベントをトリガーにしたりする際は、JavaScriptのライブラリを使用するのではなく、IntersectionObserverが非常に簡単で便利です。

IntersectionObserverを使用して、Vue.jsでスクロールイベントをトリガーする方法を紹介します。

IntersectionObserverを使用して、Vue.jsでスクロールイベントをトリガーする方法

How To Trigger a Scroll Event in Vue.js With the IntersectionObserver
by Luca Spezzano

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

フロントエンドのデベロッパーが実装するものの一つに、スクロールをトリガーにしたアニメーションがあります。この種の実装に対する私のアプローチは、年々変化してきました。

最初はJavaScriptでスクロールイベントを使用していましたが、パフォーマンス面でユーザーがスクロールするたびにイベントを発生させるのはあまり良い方法ではないことに気がつきました。

その後、ScrollMagicWOWAOSなどのライブラリを使用しました。結果には満足していましたが、最近ではWebサイトのパフォーマンスが非常に重要になっているため、スクロールに簡単なエフェクトを加えるだけでライブラリが本当に必要なのかと疑問に思っていました。ライブラリを使用すると、ページのサイズは増加します。

そして今日、スクロールでアニメーションを実行したり、イベントをトリガーしたりする必要がある時に使用しているのは、Intersection Observer APIです。
参考: Intersection Observerが簡単で便利!要素がビューポートに表示されているかを判定できる

スクロールリスナーとIntersection Observerのパフォーマンスの違いを説明した興味深い記事を読んだので、その可能性を理解するために読むことをお勧めします。

最近はVue.jsでコンポーネントを開発することが多いので、この記事でスクロールして要素がビューポートに表示されたときにイベントをトリガーする方法について解説しようと思います。

Intersection Observer APIで何ができるか

Intersection Observer APIを使用すると、ドキュメントのビューポートと要素の交点の変化を取得することができます。

実装にフォーカスをあてたいので、基礎知識についてはMDNをご覧ください。

ブラウザのサポート

Intersection ObserverはIEを除く、すべてのブラウザでサポートされています。

サイトのキャプチャ

IntersectionObserverのサポートブラウザ

IntersectionObserverのコンポーネント

それでは、コンポーネントの作成を始めましょう。
ここでは、TailwindCSSのクラスを使用しています。

ページには複数のIntersection Observerがあるかもしれないので、propを使ってユニークなものにする必要があります。

refを介して要素を参照します(refの詳細についてはこちらをご覧ください)。

mountedで、Intersection Observer APIを使用します。もし要素がビューポートと交差している場合は、dataオブジェクト内のisIntersectingElement値はtrueに設定され、そうでない場合はfalseになります。

次にisIntersectingElementというデータの値が変化するたびにカスタムイベント(値の受け渡し)を発生させることを担当するwatchを設定します。

これで、親からイベントの値を受け取って、好きなことをすることができるようになりました。

サイトのキャプチャ

11 Vue.js Lifecycle Hooks

イベントをトリガーするページのポイントにコンポーネントを追加しましょう。

この時点で、isIntersectingElementというメソッドを作成します。このメソッドは要素がビューポート内で交差しているかどうかを示すtruefalseの値を取得します。このメソッドは必要に応じて何でも実行できます(アニメーションの開始、イベントのトリガーなど)。

IntersectionObserverのコンポーネントを使用して、簡単なアニメーションのデモを用意しました。

デモのキャプチャ

デモページ

終わりに

ページにスクロールのアニメーションを追加したり、特定のポイントまでスクロールしたときにイベントをトリガーにしたりする場合は、JavaScriptライブラリを使用する前にこの方法を検討することをお勧めします。

IntersectionObserverを使用することで、パフォーマンスが向上し、ページ容量も微笑むことでしょう。

sponsors

top of page

©2021 coliss