Skip to content
Vue.js wrapper for perfect scrollbar
Branch: master
Clone or download
Latest commit 71025dc Oct 13, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Build dist files Oct 12, 2018
example Remove CSS from JS Oct 2, 2018
src Destroy PerfectScrollbar object and clear reference to HTMLElement af… Oct 12, 2018
test/unit
.eslintrc.js Plugin repository init Sep 19, 2018
.gitignore Plugin repository init Sep 19, 2018
LICENSE Initial commit Sep 19, 2018
README.md Update README Oct 2, 2018
_config.yml Set theme jekyll-theme-cayman Sep 23, 2018
karma.conf.js Test global plugin installation Sep 20, 2018
package.json Upgrade version Oct 12, 2018
postcss.config.js Remove CSS from JS Oct 2, 2018
rollup.config.js Remove CSS from JS Oct 2, 2018
webpack.config.js Plugin repository init Sep 19, 2018
yarn.lock Remove CSS from JS Oct 2, 2018

README.md

vue2-perfect-scrollbar

Vue.js minimalistic but powerful wrapper for 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>

Edit Vue Template

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

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"/>

Edit Vue Template

Props

tag {String}

Tag which will be render as perfect scrollbar container

Default: div

options {Object}: Options

perfect-scrollbar options.

Events

You can listen on every event which offer you perfect-scrollbar. Read more

DEMO

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

Cookbook

Soon

You can’t perform that action at this time.