vue-mixin-in-viewport 0.0.2 • Public • Published 7 years ago Vue 2.0 mixin to observe intersection using the Intersection Observer API
This mixin requires the Intersection Observer API . In case you want to support older browsers, there is vue-mixin-in-viewport.polyfill.js which comes with a polyfill .
$ npm install vue-mixin- in -viewport
import inViewportMixin from ' vue-mixin-in-viewport '
import viewportMixin from ' vue-mixin-in-viewport/dist/vue-mixin-in-viewport.polyfill '
Vue . component ( ' avatar-component ' , {
template : ' #avatar-component ' ,
mixins : [ inViewportMixin ]
} )
` ` ` html
<avatar-component v-on:viewport="onViewportEnter"></avatar-component>
Name
Type
Default
Description
root
String
null
Selector specifying element that is used as the viewport for checking visiblity of the target.
rootMargin
Number
0
Margin around the root.
threshold
Number
0
Indicates at what percentage of the target's visibility the observer's callback should be executed.
once
Boolean
false
Fire only once.
Name
Type
Description
inViewport
Boolean
true if component is in viewport
Name
Description
viewport-enter
Fire when target enters the viewport/root element.
viewport-change
Fire when target enters or leaves the viewport/root element.
viewport-leave
Fire when target leavs the viewport/root element.
MIT
Readme Keywords none
Package Sidebar Install npm i vue-mixin-in-viewport
Downloads