The vue-perfect-scrollbar library lets us add a scrollbar easily into our Vue app.
In this article, we’ll look at how to add a scroll bar to our Vue app with it.
Installation
We can install the library by running:
npm install vue-perfect-scrollbar
Adding the Scrollbar
We can add a scrollbar with the library by writing:
<template>
<div id="app">
<VuePerfectScrollbar
style="height: 300px"
class="scroll-area"
v-once
:settings="settings"
@ps-scroll-y="scrollHandle"
>
<p v-for="n in 100" :key="n">{{n}}</p>
</VuePerfectScrollbar>
</div>
</template>
<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar";
export default {
name: "App",
components: {
VuePerfectScrollbar
},
data() {
return {
settings: {
maxScrollbarLength: 60
}
};
},
methods: {
scrollHandle(evt) {
console.log(evt);
}
}
};
</script>
We add the VuePerfectScrollbar component to our Vue app after we registered it.
The v-once directive renders the elements and components inside once only.
settings has the settings. We set the maxScrollbarLength to set the length of the scrollbar.
It emits the ps-scroll-y event to run a method when we scroll.
Options
We can set many other options.
wheelSpeed sets the scroll speed of the mouse wheel.
wheelPropagation is a boolean to let us set whether to propagate mouse wheel events.
swipeEasing is a boolean to add easing to swipes.
minScrollbarLength is a number to set the min scrollbar length.
scrollingThreshold is a number to set the threshold for applying the ps--scrolling-x and ps--scrolling-y classes.
useBothWheelAxes is a boolean to enable vertical and horizontal scrolling.
suppressScrollX is a boolean to disable x-axis scrolling.
suppressScrollY is a boolean to disable y-axis scrolling.
scrollXMarginOffset is a number of pixels of the content that the content width can surpass the container width without enabling the x-axis scrollbar.
scrollYMarginOffset is a number of pixels of the content that the content width can surpass the container width without enabling the y-axis scrollbar.
Events
In addition to the ps-scroll-y event, the VuePerfectScrollbar component emits other events.
ps-scroll-x is emitted when we scroll horizontally.
ps-scroll-up is emitted when we scroll upward.
ps-scroll-down is emitted when we scroll downward.
ps-scroll-left is emitted when we scroll left.
ps-scroll-right is emitted when we scroll right.
ps-y-reach-start is emitted when we reach the start of the y-axis.
ps-y-reach-end is emitted when we reach the end of the y-axis.
ps-x-reach-start is emitted when we scroll to the start of the x-axis.
ps-x-reach-end is emitted when we scroll to the end of the x-axis.
Conclusion
The vue-perfect-scrollbar component lets us add a scrollbar and handle various events emitted when scrolling.
