Vue3 Smooth Scroll


Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll.

For simple use-cases, the native scroll-behavior CSS property (working draft) may be enough.

Features

- Works on Vue 3
- Directive and programmatic API with global and local config overrides
- SSR
- Smooth, non-blocking animation using requestAnimationFrame (with fallback)
- Y-axis or vertical scrolling
- Specific scroll containers
- 1.4kB gzipped, 3.1kB min

Installation

$3

`` bash
npm install --save vue3-smooth-scroll
`

` js
import { createApp } from 'vue'
import VueSmoothScroll from 'vue3-smooth-scroll'

const app = createApp(...)
app.use(VueSmoothScroll)
`

$3

` html





`

Usage

$3

` html
Section 3


`

$3

` js
methods: {
scrollToMyEl () {
const myEl = this.$refs.myEl || this.$el || document.getElementById(...)

this.$smoothScroll({
scrollTo: myEl, // scrollTo is also allowed to be number
hash: '#sampleHash' // required if updateHistory is true
})
}
}
`

$3

` js
import { inject, ref } from 'vue'
setup () {
const myEl = ref(null)
const smoothScroll = inject('smoothScroll')
const scrollToMyEl = () => {
smoothScroll({
scrollTo: myEl.value,
hash: '#sampleHash'
})
}
}
`

Custom options

$3

` js
{
duration: 500, // animation duration in ms
offset: 0, // offset in px from scroll element, can be positive or negative
container: '', // selector string or Element for scroll container, default is window
updateHistory: true, // whether to push hash to history
easingFunction: null // gives the ability to provide a custom easing function t => ...
// (see https://gist.github.com/gre/1650294 for examples)
// if nothing is given, it will defaults to easeInOutCubic
}
`

$3

` js
const app = createApp(...)
app.use(VueSmoothScroll, {
duration: 400,
updateHistory: false
})
`

$3

` html



`

$3

` js
this.$smoothScroll({
scrollTo: this.$refs.myEl,
duration: 1000,
offset: -50,
})
`

$3

` js
const smoothScroll = Vue.inject('smoothScroll')
smoothScroll({
scrollTo: refs.myEl,
duration: 1000,
offset: -50,
})
``

License

MIT