Add a Good Looking Scrollbar to our App with the vue-perfect-scrollbar Library

Image for post
Image for post
Photo by --> paypal.me/ninekoepfer on Unsplash

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store