Vue 3 and Vue 2 wrapper for the perfect scrollbar plugin.
How to use it:
1. Import and register the vue-perfect-scrollbar.
// Vue 2
import PerfectScrollbar from 'vue2-perfect-scrollbar'
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
Vue.use(PerfectScrollbar)
// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import PerfectScrollbar from 'vue3-perfect-scrollbar'
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'
const app = createApp(App)
app.use(PerfectScrollbar)
app.mount('#app')
2. Add the perfect-scrollbar component to the app.
<perfect-scrollbar> ... scrollable content ... </perfect-scrollbar>
3. Set the height of the scrollable container.
.ps {
height: 300px;
}
4. Available props.
options: {
// perfect-scrollbar options
type: Object,
required: false,
default: () => {}
},
tag: {
type: String,
required: false,
default: 'div'
},
watchOptions: {
// uses perfect-scrollbar options
type: Boolean,
required: false,
default: false
}
Preview:
Changelog:
v1.5.56 (12/03/2022)
- Updated dependency
v1.5.0 (12/29/2019)
- Avoid potential issues during update cycle
- Add options to toggle watching on options
Download Details:
Author: mercs600
Live Demo: https://mercs600.github.io/vue2-perfect-scrollbar/
Download Link: https://github.com/mercs600/vue2-perfect-scrollbar/archive/master.zip
Official Website: https://github.com/mercs600/vue2-perfect-scrollbar
Install & Download:
# Vue 3
$ npm i vue3-perfect-scrollbar
# Vue 2
$ npm i vue2-perfect-scrollbar