Skip to content

boboldehampsink/vue3-scroll-spy

 
 

Repository files navigation

bennyxguo logo

Vue3 Scroll-Spy Directive

Scrollspy and animated scroll-to for Vue3, inspired by vue2-scrollspy.
—— Made with ❤️ by Benny Guo

Github starts License Npm downloads npm bundle size (minified + gzip) Npm version

| 📙 中文文档 | 📙 Changelog

Installation

npm i vue3-scroll-spy -S

OR

yarn add vue3-scroll-spy

Usage

Support

Supported Package Version
Vue 3+

Install Directive

// global register at main.js
import { registerScrollSpy } from 'vue3-scroll-spy';

const app = createApp(App)
// Using default options
registerScrollSpy(app)

// or custom global options
registerScrollSpy(app, options)

app.mount('#app')

On template

<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>

Configuration

v-scroll-spy

Binding scroll-spy to sections (or elements) of a container.

Directive name Description Default
v-scroll-spy="{allowNoActive: true}" When scroll position is outside of the container, active class will be removed. Keep one section stays active at all time.
v-scroll-spy="{offset: 50}" TAdding offset to scroll and active elements. Default: 0
v-scroll-spy="{time: 200, steps: 30}" Set the animation options, time is animation duration, steps is step per frame. {time: 200, steps: 30}

v-scroll-spy-active

Setting active elements' selector and class properties.

Directive name Description Default
v-scroll-spy-active="{selector: 'li.menu-item', class: 'custom-active'}" Customize elements selector and class name. {selector: null, class: 'active'}

v-scroll-spy-link

Add click handler on children elements allow scrolling to the related section.

Directive name Description Default
v-scroll-spy-link="{selector: 'a.menu-link'}" Customize menu links selector. {selector: null, class: 'active'}

Bezier animations

import { registerScrollSpy, Easing } from '@/directives/ScrollSpy'

const app = createApp(App)

// or custom global options
registerScrollSpy(app, {
  easing: Easing.Cubic.In
})

app.mount('#app')

Note

  • You should have the same number of children elements for v-scroll-spy, v-scroll-spy-active, v-scroll-spy-link for this directive to work correctly.
  • If you need to share this scroll-spy directive on multiple containers, you can add data-scroll-spy-id="" on each element container, where this directive is bind.

Nested sections

Vue3 Scroll-Spy also support multi-leveled sections:

<ol
  v-scroll-spy
  v-scroll-spy-active="{selector: 'li.menu-item', class: 'active'}"
>
  <li class="menu-item">Item 1</li>
  <li class="menu-item">
    Item 2
    <ol>
      <li class="menu-item">Item 2.1</li>
      <li class="menu-item">Item 2.2</li>
    </ol>
  </li>
</ol>

Liscense

MIT License

About

A vue3 directive for scroll menu tracking.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 91.7%
  • JavaScript 8.3%