@aleios10/vue3-scroll-spy-composable NPM

Installation

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

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

@tweenjs/tween.js vue

@everything-registry/sub-chunk-40 @aleios10/nuxt-scroll-spy-composable

1.0.1

9 months ago

1.0.0

9 months ago