# 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.

Source

# Installation

Globally:

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

Vue.component("VIntersect", VIntersect)

Locally:

<script>
// SomeComponent.vue
import { VIntersect } from "vuetensils/src/components"

export default {
  components: {
    VIntersect,
  },
  // ...
}
</script>

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: 4/15/2020, 12:16:00 AM