1. z-vue-scroll

z-vue-scroll

DEPRECATE!

The package is deprecated! Please install it from private registry!

NOTICE

z-vue-scroll is almost a copy of vue2-perfect-scrollbar, just the name changed and replace dependency perfect-scrollbar with perfect-scrollbar-latest. perfect-scrollbar has many bugs fixed while no one publish the new one to npm, so i decide to create new repos for these two with README.md and license kept. This package will no longer update. Please go to vue2-perfect-scrollbar!
1.05 -> 1.06 update changed the dependency from perfect-scrollbar-latest to [email protected] which fixed the issues.

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

Dependencies