Vue.js Wrapper For Perfect Scrollbar

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:

Vue.js Wrapper For Perfect Scrollbar

Changelog:

v1.5.5 (02/06/2022)

  • Updated perfect-scrollbar 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

Add Comment