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