Intersection observer

The v-intersect directive utilizes the Intersection Observer API. It provides an easy-to-use interface for detecting when elements are visible within the user's viewport. This is also used for the v-lazy component.

Usage

Scroll the window and watch the colored dot. Notice as the v-card comes into view that it changes from error to success

API

Select your desired component from below and see the available props, slots, events and functions.

options

Examples

Below is a collection of simple to complex examples.

With options

The v-intersect directive accepts options. Available options can be found in the Intersection Observer API. Below is an example using the threshold option.

Polyfill

While the Intersection Observer API is not available in IE11 by default, it can be implemented using a polyfill.

Up Next

Ready for more? Continue reading with:

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