Description

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

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

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

• vue3-scrollbar (other vue 2)

Usage

npm install vue3-perfect-scrollbar-z --save

Import the module in the place you want to use:

import Scrollbar from 'vue3-perfect-scrollbar-z'
import 'vue3-perfect-scrollbar-z/dist/styles.css';

// const app = createApp(App);
app.use(Scrollbar);
//app.mount('#app');

Snippet

simple

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

special tagName (tbody, ul, dl, ol) (for sample)

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

// const refScroll = ref(null) from setup

// access scrollbar (your handler)
let { scrollbar } = refScroll.value
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 or document.querySelector(...).scrollTop = 0...

• 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

• you should use ul/dl/ol with basic

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

• 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...)

• Some cases (some libs) when you scroll to bottom and remove item data. It leaves empty space. => It has check here. (and checking...)

RUN

LIVE EXAMPLE

npm install

npm run dev
npm run start

License

MIT