Vue-mixin-in-viewport NPM

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

intersection-observer

@infinitebrahmanuniverse/nolb-vue-mi @everything-registry/sub-chunk-3086

0.0.2

7 years ago

0.0.1

7 years ago

0.0.0

7 years ago