vue-on-scroll
Vue onscroll
Adds v-on-scroll
directive to vue.
Directive calls function or toggles class when element changes visibility.
Options and Modifiers
Option | Type | Default | Description |
---|---|---|---|
useCapture |
bool | false | Capture scroll events anywhere in the DOM. |
baseClass |
string | Add this class to all elements with the directive. | |
directive |
string | on-scroll | Use custom directive name. |
framerate |
number | 20 | Max framerate for checking visibility. Lower values increase performace higher values increase precision. Suggested range: 10 - 60 |
Modifier | Description |
---|---|
capture |
Capture scroll events anywhere in the DOM. |
repeat |
Perform action every time visibility changes, not only the first time. |
Init
import Vue from 'vue'
import VueOnScroll from 'vue-on-scroll'
Vue.use(VueOnScroll, {useCapture: true})
Examples
Toggle visible
class every time.
<p v-on-scroll.repeat>Hello world</p>
Call onscroll
method the first time only.
<p v-on-scroll="onscroll">Hello world</p>
Toggle animate
class the first time only, when any element is scrolled.
<img v-on-scroll.capture="'animate'" src="some/image.bmp"/>