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
Simple download from releases and include it in script tag.
If you have an installed vue-scroll at your node_modules, you can import it like following(ES2015).
import vuescroll from 'vue-scroll'
Vue.use(vuescroll)It's very simple, just declar in html tags(Just like other standard vue directives) and provide a defined callback - the scroll function below.
In html:
<div v-scroll="onScroll">
...
</div>
In javasript:
new Vue({
el: '#app',
data: {},
methods:{
onScroll:function(e, position){
this.position = position;
}
}
})The function onScroll has two arguments, e is the scroll event object, position is an object which has two properties about the postion of scroll bar:
- scrollTop type:number
- scrollLeft type:number
-
Sample - commonjs Introduction
MIT