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

Post on:2021年2月24日

はじめに

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

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

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

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

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

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

Intersection Observer APIで何ができるか

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

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

ブラウザのサポート

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

IntersectionObserverのサポートブラウザ

IntersectionObserverのコンポーネント

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

<template>
  <div :ref="sentinalName" class="w-full h-px relative" />
</template>
<script>
export default {
name: 'IntersectionObserver',
props: {
  sentinalName: {
    type: String,
    required: true,
  },
},
data(){
  return {
    isIntersectingElement: false,
  }
},
watch: {
  isIntersectingElement: function(value) {
    this.$emit('on-intersection-element', value)
  },
},
mounted() {
  const sentinal = this.$refs[this.sentinalName]
  const handler = (entries) => {
    if (entries[0].isIntersecting) {
      this.isIntersectingElement = true
    } 
    else {
      this.isIntersectingElement = false
    }
  }
  const observer = new window.IntersectionObserver(handler)
  observer.observe(sentinal)
},
}
</script>

</template>

export default {

name: 'IntersectionObserver',

props: {

sentinalName: {

type: String,

required: true,

data(){

return {

isIntersectingElement: false,

}

watch: {

isIntersectingElement: function(value) {

this.$emit('on-intersection-element', value)

mounted() {

const sentinal = this.$refs[this.sentinalName]

const handler = (entries) => {

if (entries[0].isIntersecting) {

this.isIntersectingElement = true

}

else {

this.isIntersectingElement = false

}

const observer = new window.IntersectionObserver(handler)

observer.observe(sentinal)

}

</script>

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

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

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

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

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

11 Vue.js Lifecycle Hooks

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

<intersection-observer
  sentinal-name="sentinal-name"
  @on-intersection-element="onIntersectionElement"
></intersection-observer>

<intersection-observer

sentinal-name="sentinal-name"

@on-intersection-element="onIntersectionElement"

></intersection-observer>

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

onIntersectionElement(value) {
  // value will be true when the component is visible on the page   
     otherwise false
  // you can do whatever you want
},