Vue.js plugin to detect when elements are and have been in the viewport For Vue 2.0.
- Available through npm as vue-is-in-view.
import VueIsInView from 'vue-is-in-view';
Vue.use(VueIsInView);
- Available through npm as vue-is-in-view.
const VueIsInView = require('vue-is-in-view');
Vue.use(VueIsInView);
- You can also directly include it with a
<script>
tag when you have Vue included globally. It will add a globalVueIsInView
which can then be installed using
Vue.use(VueIsInView);
<figure v-is-in-view></figure>
<div v-is-in-view="{
showIfPartial: true,
callback: function(element) { console.log(element, 'in view!') }
}"></div>
Class | Condition |
---|---|
is-in-view | Applied when all of the element is in the viewport |
has-been-in-view | Applied after the whole of an element has been in the viewport once |
is-partially-in-view | *Applied when any part of an element is in the viewport |
has-been-partially-in-view | *Applied after any part of an element has been in the viewport |
* Only available when the showIfPartial
key is true
in the configuration object, see above.