vs

vue2-scrollspy

Scrollspy for Vue2

Showing:

Popularity

Downloads/wk

1.6K

GitHub Stars

130

Maintenance

Last Commit

3yrs ago

Contributors

10

Package

Dependencies

2

Size (min+gzip)

3.9KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Vue Scroll

Readme

vue2-scrollspy

Vue 2.x npm npm-downloades npm bundle size (minified + gzip) license

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.

  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

v-scroll-spy-active

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.

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.

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100