vue-element-spy

Plugin for detecting when element reaches top of the viewport. The plugin uses Intersection Observer.

Installation

yarn add vue-element-spy

Import

import Vue from 'vue'
import VueElementSpy from 'vue-element-spy'

Vue.use(VueElementSpy)

Browser

<script src="vue.js"></script>
<script src="/node_modules/vue-element-spy/dist/vue-element-spy.js"></script>

Vue.use(VueElementSpy)

Install options

refreshInterval

It's possible to set refreshInterval option for periodical spies refresh. Use if content changes or reflows without scrolling. Default: 250 Disable: 0

Vue.use(VueElementSpy, {refreshInterval: 500})

Usage

v-vue-element-spy directive

v-vue-element-spy observes whether the target element is at the top of the viewport and calls callback.

<div v-vue-element-spy="{callback: myCallback}">
<!-- or shortened syntax -->
<div v-vue-element-spy="myCallback">

v-vue-element-spy options

callback: Function

Callback function. Two arguments are passed: boolean whether element is reached top, target element.

greedy: Boolean

Set greedy value to false if you want to observe bottom of the target and get notified when the whole element leaves viewport. Default: true

offset: Number

Set offset value if you want to move activation point in px. Default: 0

outOfContext: Boolean

By default all spies are in one global context and if second target reaches viewport then first target becomes inactive. Set outOfContext value if you don't want the target to be affected by other spies. Default: false

v-vue-element-spy-context directive

If you want a bunch of spies to be moved to separate context add v-vue-element-spy-context to any of the ancestor elements. By default all spies are in common global context and only one target can be active at a time.

<div v-vue-element-spy-context>
  <h1 v-vue-element-spy="myCallback">Title 1</h1>
  <h1 v-vue-element-spy="myCallback">Title 2</h1>
  <h1 v-vue-element-spy="myCallback">Title 3</h1>
</div>