vue3-perfect-scrollbar-z

LIVE EXAMPLE

---

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