# Intersect

Uses IntersectionObserver to fire events when content enters or exits the screen.

The components accepts four props: root, rootMargin, threshold, and options. The first three correspond to the IntersectionObserver options properties, or you can pass them all together to the options prop.

# Installation


// main.js
import Vue from 'vue';
import { VIntersect } from 'vuetensils/src/components';

Vue.component('VIntersect', VIntersect);


// SomeComponent.vue
import { VIntersect } from 'vuetensils/src/components';

export default {
  components: {
  // ...

For IE 11 support, you may want to add the following polyfill:

<script src='https://cdn.polyfill.io/v2/polyfill.js?features=IntersectionObserver'></script>

# Examples

Open your console and scroll around to watch events get fired.

.intersection-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  border: 1px solid;

# Using a scoped slot

By using scoped slots, you can access the current IntersectionObserverEntry

(Setting the threshold to 1 means the entire element must be visible before isIntersecting changes)

Last Updated: 12/12/2020, 3:06:57 PM