Scrollspy for Vue2

vue2-scrollspy

Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See https://ibufu.github.io/vue2-scrollspy/ or Jsfiddle.

Installation NPM

$ npm install vue2-scrollspy --save CDN

<script src="//unpkg.com/vue2-scrollspy/dist/index.js"></script> Basic Usage

import Vue from 'vue'; import Scrollspy from 'vue2-scrollspy'; // use default options Vue.use(Scrollspy); // or custom options Vue.use(Scrollspy, options);

<ul v-scroll-spy-active v-scroll-spy-link> <li> <a>Menu 1</a> </li> <li> <a>Menu 2</a> </li> </ul> <div v-scroll-spy> <div> <h1>Header 1</h1> <p>Content</p> </div> <div> <h1>Header 2</h1> <p>Content</p> </div> </div> Old Browsers

Old Browsers like IE11:

import Scrollspy from "vue2-scrollspy/dist/index"; Vue.use(Scrollspy); Configuration v-scroll-spy

Declares container of sections for elements to scrollspy.

v-scroll-spy="{data: 'section'}": add a section data property in scope Vue instance that is binded to the section index.

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.

v-scroll-spy="{offset: 50}": add an offset for scroll and active events.

v-scroll-spy="{time: 200, steps: 30}": set the animation options.

$scrollTo(index: int) is provided on scope Vue instance to invoke a scroll to the given section index.

v-section-selector: set section which should scrollto

v-scroll-spy-active

Set the active css class on element that match the index of current scrollspy.

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. v-scroll-spy-link

Add click handler on children elements that will scroll to the related section.

v-scroll-spy-link="{selector: 'a.menu-link'}": customize elements selection. By default, it will use a to select all links. Bezier animations

Example:

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:

<div class="container" v-scroll-spy> <div> <h1>Header 1</h1> <p>Content</p> </div> <div> <h1>Header 2</h1> <p>Content</p> </div> </div>

.container { position: relative; } Develop

npm i && npm run watch

cd docs-src && npm i && npm run dev License

MIT