vue-scroll-show

A Vue.js component that adds a class to the element if it visible on display after scrolling
6,237 10
Install
npm install vue-scroll-show
Latest Version:0.1.4
Vue:2
License:MIT
Last Updated:Dec 3, 2022
Links: GitHub  ·  npm
Maintainer: alekseypleshkov

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

Version History

Version Released Vue License
0.1.4 ^2.2.6 MIT
0.1.3 ^2.2.6 MIT
0.1.2 ^2.2.6 MIT
0.1.1 ^2.2.6 MIT
0.1.0 ^2.2.6 MIT