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.
Edit this page
Copy Page as Markdown
Usage
Scroll the window and watch the colored dot. Notice as the v-card comes into view that it changes from error to success.
Card title
Phasellus magna. Quisque rutrum. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Aliquam lobortis. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. In turpis. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In turpis. Pellentesque dapibus hendrerit tortor. Ut varius tincidunt libero.
API
| Directive | Description |
|---|---|
| v-intersect | The intersection observer directive |
Toggle Inline API
Examples
Props
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.
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.