Vue.js minimalistic but powerful wrapper for perfect scrollbar
Because I โค๏ธ to use perfect-scrollbar in my projects (๐ utatti). But also because the current solutions on github are outdated or overcomplicated.
Because you want to load perfect-scrollbar to your Vue project in an easy way. But also because this plugin is updated, tested and build by rollup. So you will not find any unnecessary ๐ฉ code in this repo. I hope ๐.
If you have any reasonable PR you are welcome ๐ค
npm install vue3-perfect-scrollbar
yarn add vue3-perfect-scrollbar
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')
So then you can use this plugin in each component as
<perfect-scrollbar>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</perfect-scrollbar>
This plugin will generate a container with ".ps" class name, you need to customize the height of the container
/* example */
.ps {
height: 400px;
}
Install method takes additional parameters:
Name of your global component.
Default: PerfectScrollbar
Tag which will be render as perfect scrollbar container
Default: div
Set true if you want to update perfect-scrollbar on options change
Default: false
options {Object}
: Options
perfect-scrollbar options.
Default: {}
<template>
<div>
<perfect-scrollbar>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</perfect-scrollbar>
</div>
</template>
<script>
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
export default {
components: {
PerfectScrollbar
}
}
</script>
<style src="vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css"/>
Tag which will be render as perfect scrollbar container
Default: div
Set true if you want to update perfect-scrollbar on options change
Default: false
options {Object}
: Options
perfect-scrollbar options.
You can use Vue.js way to listen on the all perfect-scrollbar events. List of events you can find here
Simple example:
<template>
<div id="app">
<perfect-scrollbar @ps-scroll-y="onScroll" ref="scrollbar">
<div>your content here</div>
</perfect-scrollbar>
</div>
</template>
<script>
export default {
methods: {
onScroll(event) {
console.log(this.$refs.scrollbar.ps, event);
}
}
};
</script>
https://mercs600.github.io/vue3-perfect-scrollbar/. You can also fork example from codesandbox
One of simple solution to setup custom scrollbar to top when your route is changed.
- Add perfect scrollbar as wrapper for router-view and add simple ref
<perfect-scrollbar ref="scroll">
<router-view></router-view>
</perfect-scrollbar>
- Add watch on $route to setup scroll container to 0, when route is changed.
watch: {
$route() {
this.$refs.scroll.$el.scrollTop = 0;
}
}