Vue Scroll Show

Showing the element if the user reached it after scroll

Installation

npm i --save-dev vue-scroll-show

import VueScrollShow from 'vue-scroll-show'

Vue.use(VueScrollShow)

SSR (Nuxt.js)

import VueScrollShow from 'vue-scroll-show/dist/ssr.index'

Vue.use(VueScrollShow)

Usage

<element v-scroll-show></element>

or with options

<div id='event'>
  <span v-scroll-show='{active: "show fadeIn", delay: 500, parentId: "event"}'>Show one from parentId</span>
  <span v-scroll-show='{active: "show fadeIn", delay: 1000, parentId: "event"}'>Show two from parentId</span>
</div>
<span v-scroll-show='{active: "show fadeIn"}'>Show three without parentId</span>
<span v-scroll-show='{active: "show fadeIn", offset: 500}'>Show four with offset 500</span>

Directive options

| Option | Description | | ------ | ------ | | active | Add classes if element in display area | | delay | Timeout to add classes to element | | offset | Screen offset to add class to element | | parentId | Id parent element for starting add classes to directive elements |