vue-observe-visibility
Detect when an element is becoming visible or hidden on the page. Demo
Sponsors
Table of contents
Installation
npm install --save vue-observe-visibility
Import
import Vue from 'vue'
import VueObserveVisibility from 'vue-observe-visibility'
Vue.use(VueObserveVisibility)
Or:
import Vue from 'vue'
import { ObserveVisibility } from 'vue-observe-visibility'
Vue.directive('observe-visibility', ObserveVisibility)
Browser
<script src="vue.js"></script>
<script src="https://unpkg.com/vue-observe-visibility/dist/vue-observe-visibility.min.js"></script>
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the directives:
Vue.use(VueObserveVisibility)
Use specific directives:
Vue.directive('observe-visibility', VueObserveVisibility.ObserveVisibility)
Usage
The v-observe-visibility directive is very easy to use. Just pass a function as the value:
<div v-observe-visibility="visibilityChanged">
This also works on components:
<MyComponent v-observe-visibility="visibilityChanged" />
The function will be called whenever the visiblity of the element changes with the argument being a boolean (true means the element is visible on the page, false means that it is not).
The second argument is the corresponding IntersectionObserverEntry object.
visibilityChanged (isVisible, entry) {
this.isVisible = isVisible
console.log(entry)
}
IntersectionObserver options
It's possible to pass the IntersectionObserver options object using the intersection attribute:
<div v-observe-visibility="{
callback: visibilityChanged,
intersection: {
root: ...,
rootMargin: ...,
threshold: 0.3,
},
}">
Once
It can be useful to listen for when the element is visible only once, for example to build introduction animations. Set the once option to true:
<div v-observe-visibility="{
callback: visibilityChanged,
once: true,
}">
Throttling visibility
You can use the throttle options (in ms) specifying minimal state duration after which an event will be fired. It's useful when you are tracking visibility while scrolling and don't want events from fastly scrolled out elements.
<div v-observe-visibility="{
callback: visibilityChanged,
throttle: 300,
}">
You can also pass a leading option to trigger the callback the first time when the visibility changes without waiting for the throttle delay. I can either be visible, hidden or both.
<div v-observe-visibility="{
callback: visibilityChanged,
throttle: 300,
throttleOptions: {
leading: 'visible',
},
}">
Passing custom arguments
You can add custom argument by using an intermediate function:
<div v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, customArgument)">
Here visibilityChanged will be call with a third custom argument customArgument.
Disabling the observer
Passing a falsy value to the directive will disable the observer:
<div
v-for="(item, index) of items"
:key="item.id"
v-observe-visibility="index === items.length - 1 ? visibilityChanged : false"
>
Example
<div id="app">
<button @click="show = !show">Toggle</button>
<label>
<input type="checkbox" v-model="isVisible" disabled/> Is visible?
</label>
<div ref="test" v-show="show" v-observe-visibility="visibilityChanged">Hello world!</div>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true,
isVisible: true,
},
methods: {
visibilityChanged (isVisible, entry) {
this.isVisible = isVisible
console.log(entry)
},
},
})
</script>
455 Dec 16, 2022
930 Dec 27, 2022
56 May 9, 2022
86 Aug 27, 2022
1.6k Dec 27, 2022
0 Oct 27, 2020
1 Jun 5, 2022
5 Sep 25, 2022
0 Jul 22, 2021
115 Jun 28, 2022
31 May 8, 2021
1.6k Jan 3, 2023
5 Jan 29, 2022
0 Mar 26, 2021
13.4k Jan 1, 2023
154 Dec 2, 2022
61 Dec 23, 2022
356 Dec 23, 2022
323 Dec 27, 2022