Version: 1.0.0

Usage

Install the package

    npm install vue-perfect-scrollbar-z

Import the module in the place you want to use:

    import Scrollbar from 'vue-perfect-scrollbar-z'

Wrap you content in this component:

Snippet

    // ul scroll
    <div style="border: 1px solid blue">
        <Scrollbar
            tagName="ul"
            maxHeight="400px"
            className="list-group"
            :effectData="listData"
            always
        >
            <li v-for="listData">...</li>
        </Scrollbar>
    </div>

    // only scroll body
    <table>
        <thead>...</thead>
        <Scrollbar
            tagName="tbody"
            :effectData="[listData, isShowHide, ...somthingelse]"
            height="400px"
        >
            <tr v-for="listData">...</tr>
        </Scrollbar>
    </table>

    // more
    <Scrollbar :effectData="something" height="100px">
        {{ something }}
    </Scrollbar>

    // scroll event
    <Scrollbar
        height="100px"
        @onScrollY="evt => somethingelem(evt)" // => somethingelem: function
    >
        {{ something }}
    </Scrollbar>

Props

The following props are accepted:

options

The optional parameters used to initialize perfect-scrollbar.
For more info, please refer to https://github.com/utatti/perfect-scrollbar#options

tagName

The container html name. Default to “div”. Only string is allowed.
Should be: tbody, ul, dl, ol, div, section...
Note: tbody only scroll-y

effectData

Automatically update the scrollbar if the effectData has changed.
Type: Object, Array, String

always

true: Always show scrollbar if data is overflow.

false: Show scrollbar only mousehover. (default)

maxHeight

max-height of scrollbar. px, %, vh

height

height of scrollbar. px, %, vh

For scrollbar to work, need to set height or maxheight.

width, maxWidth

set the width of the element.

If you want horizontal scrolling to show, update the child component’s css to be wider than the width)

className

The className added to container.

style

The style added to container.

@onScrollY

Invoked when the y-axis is scrolled in either direction.

@onScrollX

Invoked when the x-axis is scrolled in either direction.

@onScrollUp

Invoked when scrolling upwards.

@onScrollDown

Invoked when scrolling downwards.

@onScrollLeft

Invoked when scrolling to the left.

@onScrollRight

Invoked when scrolling to the right.

@onYReachStart

Invoked when scrolling reaches the start of the y-axis.

@onYReachEnd

Invoked when scrolling reaches the end of the y-axis (useful for infinite scroll).

@onXReachStart

Invoked when scrolling reaches the start of the x-axis.

@onXReachEnd

Invoked when scrolling reaches the end of the x-axis.

All the callback ‘@onXXX’ can accept a parameter: the ref to the scrollbar container. You can get the current `scrollTop` and `scrollLeft`.

Methods

No. If you want to update scrollTop, scrollLeft, using document.querySelector(‘xxxx’).scrollTop = yyy
Todo: think some ideas.

Example

A working example can be found in the example directory.

npm install

npm run dev
npm run start

License

MIT

GitHub

https://github.com/delpikye-v/vue-perfect-scrollbar-z