scroll directive for vuejs 2.0
For vue 1.x, please use vue-scroll@1.0.4. Currently its code is in master branch.
npm install vue-scroll --save
Standalone bundle is not support on latest v2.1.0 currently
Simple download from releases and include it in script tag.
import Vue from 'vue'
import vuescroll from 'vue-scroll'
Vue.use(vuescroll)Directive v-scroll then can be used in any of your Component.
<template>
<ul v-scroll="onScroll">
<li></li>
</ul>
</template>
...Method onScroll receives two arguments once scroll event is fired,
- e - event
- position - Object contains scrolling data
- scrollTop Number
- scrollLeft Number
throttle and debounce are supported since v2.1.0, you can enable it as global configurations like:
Vue.use(vuescroll, {throttle: 600})
//Or
Vue.use(vuescroll, {debounce: 600})Override global configurations like
<ul v-scroll:throttle="{fn: onScroll, throttle: 500 }"><ul v-scroll:debounce="{fn: onScroll, debounce: 500 }">You please try the demo hosted on codesandbox: https://codesandbox.io/s/vuescroll-demo-orders-view-f4d3d?fontsize=14
MIT