# 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

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: 7/7/2020, 10:03:39 PM