Vue3-perfect-scrollbar-z NPM

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