vue-mixin-in-viewport

Vue 2.0 mixin to observe intersection using the Intersection Observer API

Note

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.

Installation

$ npm install vue-mixin-in-viewport

Usage

// without polyfill
import inViewportMixin from 'vue-mixin-in-viewport'

// with polyfill
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>

Props

| 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. |

Data

| Name | Type | Description | | :------------- | :--------- | :------------- | | inViewport | Boolean | true if component is in viewport |

Events

| 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. |

License

MIT