Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See https://ibufu.github.io/vue2-scrollspy/
$ npm install vue2-scrollspy --save
import Vue from 'vue';
import Scrollspy from 'vue2-scrollspy';
Vue.use(Scrollspy);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-scroll-spy="scrollPos">
<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
}
})If you want to set something else (not body) to scroll container, you could:
<div class="container" v-scroll-spy="scrollPos">
<div>
<h1>Header 1</h1>
<p>Content</p>
</div>
<div>
<h1>Header 2</h1>
<p>Content</p>
</div>
</div>.container {
position: relative;
}npm i && npm start cd docs/ && npm i && npm startMIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent