vue2-perfect-scrollbar

vue2-perfect-scrollbar

Vue.js minimalistic but powerful wrapper for perfect scrollbar

Are you looking compatible version with Vue3 ? check https://github.com/mercs600/vue3-perfect-scrollbar

Why I Created it ?

Because I ❤️ to use perfect-scrollbar in my projects (🙌 utatti). But also because the current solutions on github are outdated or overcomplicated.

Why would you use it ?

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 🤘

Install

npm

npm install vue2-perfect-scrollbar

yarn

yarn add vue2-perfect-scrollbar

How to use

Global Registration

import PerfectScrollbar from 'vue2-perfect-scrollbar'
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'

Vue.use(PerfectScrollbar)

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;
}

Global options

Install method takes additional parameters:

name {String}

Name of your global component.

Default: PerfectScrollbar

tag {String}

Tag which will be render as perfect scrollbar container

Default: div

watchOptions {Boolean}

Set true if you want to update perfect-scrollbar on options change

Default: false

options {Object}: Options

perfect-scrollbar options.

Default: {}

Local Registration

<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 'vue2-perfect-scrollbar'
export default {
    components: {
        PerfectScrollbar
    }
}
</script>
<style src="vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css"/>

Props

tag {String}

Tag which will be render as perfect scrollbar container

Default: div

watchOptions {Boolean}

Set true if you want to update perfect-scrollbar on options change

Default: false

options {Object}: Options

perfect-scrollbar options.

Events

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>

DEMO

https://mercs600.github.io/vue2-perfect-scrollbar/. You can also fork example from codesandbox

Cookbook

Custom scrollbar behavior with router.

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;
  }
}