Intersection Observer APIを使ったVueのカスタムディレクティブ

<template>
  <div
    v-intersect
    @intersect="onIntersect"
  >
    Element
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    const onIntersect = () => {
      console.log('ビューポート内に入りました')
    }

    return {
      onIntersect
    }
  }
}
</script>

import Vue, { VNode } from 'vue'

/**
 * intersectイベント発火
 * @param vnode 対象要素の仮想ノード
 * @param entry 対象要素の交差状態
 */
const emitIntersectEvent = (vnode: VNode, entry: IntersectionObserverEntry) => {
  const handlers = vnode.data?.on
  if (handlers && 'intersect' in handlers) {
    const handler = handlers['intersect']

    if (typeof handler === 'function') {
      handler(entry)
    } else {
      handler.forEach(f => f(entry))
    }
  }
}

/**
 * 要素の監視解除
 * @param el 対象要素
 */
const disconnect = (el: HTMLElement) => {
  const id = el.dataset.intersectionObserverId
  if (id) {
    observers[id]?.disconnect()
    delete observers[id]
  }
  el.removeAttribute('data-intersection-observer-id')
}

/** IntersectionObserverインスタンスの管理オブジェクト */
const observers: { [key: string]: IntersectionObserver } = {}
let currentId = 0

Vue.directive('intersect', {
  inserted(el, binding, vnode) {
    const { once, each, out } = binding.modifiers
    const observerOptions: IntersectionObserverInit = typeof binding.value === 'object' ? binding.value : {}

    /** イベント発火判定 */
    const isFiring = (entry: IntersectionObserverEntry) => {
      if (each) return true

      if (out) {
        return !entry.isIntersecting
      }

      return entry.isIntersecting
    }

    // IntersectionObserverインスタンスの生成
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (isFiring(entry)) {
          // イベント発火
          emitIntersectEvent(vnode, entry)

          if (once) {
            disconnect(el)
          }
        }
      })
    }, observerOptions)

    // IntersectionObserverインスタンスの管理
    const id = String(currentId++)
    observers[id] = observer
    el.dataset.intersectionObserverId = id

    // 対象要素の監視
    observer.observe(el)
  },
  unbind(el) {
    disconnect(el)
  }
})

<template>
  <div
    v-intersect
    @intersect="onIntersect"
  >
    Element
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    const onIntersect = () => {
      console.log('ビューポート内に入りました')
    }

    return {
      onIntersect
    }
  }
}
</script>

<template>
  <div
    v-intersect.once
    @intersect="onIntersect"
  >
    Element
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    let count = 0
    const onIntersect = () => {
      // 2回目以降は呼ばれることがない
      console.log(`${++count}回ビューポート内に入りました`)
    }

    return {
      onIntersect
    }
  }
}
</script>

<template>
  <div
    v-intersect.each
    @intersect="onIntersect"
  >
    Element
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    const onIntersect = (entry: IntersectionObserverEntry) => {
      if (entry.isIntersecting) {
        console.log('ビューポート内に入りました')
      } else {
        console.log('ビューポート外に出ました')
      }
    }

    return {
      onIntersect
    }
  }
}
</script>

<template>
  <div
    v-intersect="{ threshold: 0.5 }"
    @intersect="onIntersect"
  >
    Element
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    const onIntersect = (entry: IntersectionObserverEntry) => {
      const ratio = entry.intersectionRatio
      console.log(`要素の${ratio * 100}%がビューポート内に入りました`) // -> 要素の50%がビューポート内に入りました
    }

    return {
      onIntersect
    }
  }
}
</script>