Package Exports
- vue-element-spy
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-element-spy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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>