Intersection observer

'v-intersect' ディレクティブはIntersection Observer APIを利用します。ユーザーのビューポート内に要素が表示されるタイミングを検出するための使いやすいインターフェイスを提供します。これは v-lazy コンポーネントにも使用されます。

使い方

次のウィンドウ内でスクロールし、色付きのドットを見てください。v-card が error から success に変わることがわかります。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

options

以下に、簡単な例から複雑な例まで示します。

v-intersectディレクティブはオプションを受け入れます。利用可能なオプションは、Intersection Observer API にあります。以下は、 thresholdオプションを使用した例です。

Intersection Observer API は IE11 では既定では使用できませんが、 polyfill を使用して実装できます。

準備はいいですか？以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!