<p align="center"><a href="https://tridiamond.tech" target="_blank" rel="noopener noreferrer"><img width="100" src="https://img-blog.csdnimg.cn/20200930013332450.png" alt="TriDiamond logo"></a></p>
npm install vue3-scroll-spyScrollspy and animated scroll-to for Vue3, inspired by vue2-scrollspy.
—— Made with ❤️ by TriDiamond
``bash`
npm i vue3-scroll-spy -S
OR
`bash`
yarn add vue3-scroll-spy
| Supported Package | Version |
| ----------------- | ------- |
| Vue | 3+ |
`javascript
// global register at main.js
import { registerScrollSpy } from '@/directives/ScrollSpy'
const app = createApp(App)
// Using default options
registerScrollSpy(app)
// or custom global options
registerScrollSpy(app, options)
app.mount('#app')
`
`html
Content
Content
Configuration
$3
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} |$3
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'} |$3
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'} |$3
`javascript
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.$3
Vue3 Scroll-Spy also support multi-leveled sections:
`html
v-scroll-spy
v-scroll-spy-active="{selector: 'li.menu-item', class: 'active'}"
>
Item 1
Item 2
``MIT License