Scrollspy for Vue2
npm install vue2-scrollspy
$ npm install vue2-scrollspy --save
`
$3
`html
`
Basic Usage
`js
import Vue from 'vue';
import Scrollspy from 'vue2-scrollspy';
// use default options
Vue.use(Scrollspy);
// or custom options
Vue.use(Scrollspy, options);
`
`html
Header 1
Content
Header 2
Content
`
Configuration
$3
Declares container of sections for elements to scrollspy.
1. v-scroll-spy="{data: 'section'}": add a section data property in scope Vue instance that is binded to the
section index.
2. v-scroll-spy="{allowNoActive: true}": allow no active sections when scroll position is outside of the scrollspy
container. Default behavior is too keep active at least one section in any case.
3. v-scroll-spy="{offset: 50}": add an offset for scroll and active events.
4. v-scroll-spy="{time: 200, steps: 30}": set the animation options.
5. $scrollTo(index: int) is provided on scope Vue instance to invoke a scroll to the given section index.
6. v-section-selector: set section which should scrollto
$3
Set the active css class on element that match the index of current scrollspy.
1. v-scroll-spy-active="{selector: 'li.menu-item', class: 'custom-active'}": customize elements selection and class
name to apply. By default, it will use direct children and apply active class.
$3
Add click handler on children elements that will scroll to the related section.
1. v-scroll-spy-link="{selector: 'a.menu-link'}": customize elements selection. By default, it will use a to
select all links.
$3
Example:
`js
import scrollSpy, { Easing } from 'vue2-scrollspy';
Vue.use(scrollSpy, {
easing: Easing.Cubic.In
});
`
Easing options:
http://tweenjs.github.io/tween.js/examples/03_graphs.html
Note
You should have the same number of children elements for v-scroll-spy, v-scroll-spy-active v-scroll-spy-link for
directives to work properly.
If you need to share multiple scroll-spy in the same page, you can add data-scroll-spy-id="" on each element where a
directive is declared.
If you want to set something else (not body) to scroll container, you could:
`html
Header 1
Content
Header 2
Content
`
`css
.container {
position: relative;
}
`
Develop
`shell
npm i && npm run watch
`
`shell
cd docs-src && npm i && npm run dev
``