vue-scrollspy
v0.1.3
Published
Scrollspy for Vue.js
Downloads
83
Maintainers
Readme
vue-scrollspy
Scrollspy, and animated scrolt-to, for VueJS
Installation
$ npm install vue-scrollspy --save
Setup
var Vue = require('vue');
var Scrollspy = require('vue-scrollspy');
Vue.use(Scrollspy)
Usage
HTML:
<ul>
<li :class="{active:scrollPos == 0}">
<a @click="$scrollTo(0)">Menu 1</a>
</li>
<li :class="{active:scrollPos == 1}">
<a @click="$scrollTo(1)">Menu 2</a>
</li>
</ul>
<div v-scrollspy="scrollPos" :steps="30" :time="200">
<div>
<h1>Header 1</h1>
<p>Content</p>
</div>
<div>
<h1>Header 2</h1>
<p>Content</p>
</div>
</div>
Javascript:
new Vue({
data: {
scrollPos: 0
},
ready: function(){
this.$scrollSet()
}
})
Using the directive creates the global function $scrollSet()
. Call this when the DOM is ready, or when the DOM has changed.
Animated Scroll
For animated scroll, use as follows:
<div v-scrollspy="scrollPos" :steps="30" :time="200">
time
in milliseconds, steps
is animation resolution (more steps results in a smoother animation). For non-animated scroll, simply omit these parameters.
TODO
- Add bezier animations
- Add
innerHTML
watcher
(If anybody knows how to watch innerHTML
please let me know.)