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

Examples

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

<template>
  <div>
    <VIntersect
      @enter="log('@enter fired for block 1')"
      @exit="log('@exit fired for block 1')"
      @change="log('@change fired for block 1')"
    >
      <div class="intersection-content">
        Content block 1
      </div>
    </VIntersect>

    <VIntersect
      @enter="log('@enter fired for block 2')"
      @exit="log('@exit fired for block 2')"
      @change="log('@change fired for block 2')"
    >
      <div class="intersection-content">
        Content block 2
      </div>
    </VIntersect>
  </div>
</template>

<script>
export default {
  methods: {
    log: console.log,
  },
};
</script>
<style>
.intersection-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  border: 1px solid;
}
</style>

Content block 1

Content block 2

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)

<template>
  <div>
    <VIntersect :threshold="1">
      <template #default="entry">
        <div
          class="intersection-content"
          :style="{
            background: entry.isIntersecting ? 'lightgreen' : 'lightcoral',
          }"
        >
          isIntersecting: {{ entry.isIntersecting }}
        </div>
      </template>
    </VIntersect>
  </div>
</template>

<script>
export default {
  methods: {
    log: console.log,
  },
};
</script>

isIntersecting: false