Vue3 Scroll-Spy Directive

Scrollspy and animated scroll-to for Vue3, inspired by vue2-scrollspy.
Fork based on previous work done by Benny Guo vue3-scroll-spy

Installation

npm i @aleios10/vue3-scroll-spy-composable -S

OR

yarn add @aleios10/vue3-scroll-spy-composable

Usage

Support

Supported Package	Version
Vue	3+

Use directive via composable SFC

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

<script setup>
import { useScrollSpy } from 'vue3-scroll-spy-composable';

const { vScrollSpy, vScrollSpyLink, vScrollSpyActive } = useScrollSpy()

</script>

Configuration

v-scroll-spy

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

Directive name	Description	Default
v-scroll-spy="{allowNoActiveSection: 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 { useScrollSpy } from 'vue3-scroll-spy-composable';

const { vScrollSpy, vScrollSpyLink, vScrollSpyActive } = useScrollSpy({
   easing: Easing.Cubic.In
})

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.

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>

Index changed callback

Support has been added for detecting when the index changed, and what to.

<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="{indexChanged: myCallback}">
   <div>
      <h1>Header 1</h1>
      <p>Content</p>
   </div>
   <div>
      <h1>Header 2</h1>
      <p>Content</p>
   </div>
   </div>
</template>

<script setup>
import { useScrollSpy } from 'vue3-scroll-spy-composable';

const { vScrollSpy, vScrollSpyLink, vScrollSpyActive } = useScrollSpy()

const myCallback = (index) => {
    console.log('Current Index: ', index)
}    
    
</script>

License

MIT License