vue-on-scroll
v1.1.0
Published
Adds `v-on-scroll` directive to vue. Directive calls function or toggles class when element changes visibility.
Downloads
5
Readme
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"/>