@osaxyz/intersect

インストール

npm install @osaxyz/intersect

どう動くか

v-intersect="handleintersect"のように定義すると、要素が交差（Intersect）した際に関数が呼び出されます。

また、entry（交差情報）、el（交差したDOMの情報）を受け取ることができます。

使い方

Vue.jsの場合

1. @osaxyz/intersectからintersectDirectiveをインポートします・
2. app.useを利用して登録して下さい。

importintersectDirectivefrom'@osaxyz/intersect'app.use(intersectDirective)consthandleintersect=(entry,el)=>{console.log(entry,el)}

Nuxt.jsの場合

1. plugins配下に任意の名前のjsファイルを作成し、インポートします。
2. defineNuxtPlugin を用いて登録します。

import{defineNuxtPlugin}from'nuxt/app'importintersectDirectivefrom'@osaxyz/intersect'exportdefaultdefineNuxtPlugin((nuxtApp)=>{nuxtApp.vueApp.use(intersectDirective)})

コード

<YourCustomElementsv-intersect="handleintersect">