Description

• It is wrap the perfect-scrollbar for the element.

• Auto update scrollbar(resize, data change), you don't have to do anything.

• Support for scroll-y for only the body of the table. (Keep header)

Usage

npm install vue-perfect-scrollbar-z --save

Import the module in the place you want to use:

/*
if you use perfect-scrollbar in many places you should import css in main file (override avoid)
*/
import 'vue-perfect-scrollbar-z/dist/styles.css';  // > ver 1.0.0

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

Snippet

simple

    // tagName = 'div' wrapName='div'
    // something1 = [effect1, effect2, listData, showHide, ..., somthing]
    <Scrollbar height="100px" :effectData="something1" >
        { something1 }
    </Scrollbar>

special tagName (tbody, ul, dl, ol)

    <Scrollbar
        ref="refScroll"
        tagName="tbody" // tbody, ul, dl, ol
        maxHeight="400px"
        className="list-group"
        :effectData="listData"
        // always
        // @onScrollY="scrolling"  // function scrolling
    >
        ...for data
    </Scrollbar>

// access scrollbar (your handler)
let { scrollbar } = this.$refs.refScroll
scrollbar.element.scrollTop = 0 // or something

props

| props | type | description | |----------------------|-------------------------------|----------------------------------------------------------------------------| | options | Object | perfect-scrollbar/options | | tagName | String | Container scrollbar. Default div | | effectData | String, Array, Object,..... | Automatically update the scrollbar if the effectData has changed. | | always | boolean | Always show scrollbar if data is overflow (true). Default false | | maxHeight | px, %, vh | max-height of scrollbar | | height | px, %, vh | height of scrollbar | | maxWidth | px, %, vw | max-width of scrollbar | | width | px, %, vw | width of scrollbar | | className | String | Your css-class | | libTable | Boolean | When you update for 3th-party table. Default false | | wrapName | String | Wrap all element scroll (div).When tagName is not in [tbody, ul, ol, dl.]| | wheelStop | Boolean | wheelPropagation (quick in options). Default: true. (wheelPropagation or wheelStop) | | --- | --- | --- | | @onScrollY | Function | y-axis is scrolled in either direction. | | @onScrollX | Function | x-axis is scrolled in either direction. | | @onScrollUp | Function | scrolling upwards. | | @onScrollDown | Function | scrolling downwards. | | @onScrollLeft | Function | scrolling to the left. | | @onScrollRight | Function | scrolling to the right. | | @onYReachStart | Function | scrolling reaches the start of the y-axis. | | @onYReachEnd | Function | scrolling reaches the end of the y-axis (useful for infinite scroll). | | @onXReachStart | Function | scrolling reaches the start of the x-axis. | | @onXReachEnd | Function | scrolling reaches the end of the x-axis (useful for infinite scroll). |

Note

• tbody only scroll-y (no x).

• update scrollTop, scrollLeft: using refScroll

• ul/ol/dl/tbody. This is a special (multi childs). So you shouldn't update the border for tagName.

<Scrollbar style="border: '1px solid'" tagName="tbody" ... /> => no
<parent style="border: '1px solid'"> <Scrollbar tagName="tbody" ... /> </parent> => OK

• libTable

// `maxHeight`, `height`, `maxWidth`, `width` => try to tbody
<Scrollbar :libTable="true" ><CustomTag></CustomTag></Scrollbar>

It will try to add the perfect scrollbar to the `tbody` of the `first` table found. (Checking...)

• you should use ul/dl/ol with basic

    <Scrollbar :effectData="abcd" .... > <ul> <for>...</for> </ul> <Scrollbar>

RUN

LIVE EXAMPLE

npm install

npm run dev
npm run start

License

MIT