Vue-perfect-scrollbar-z NPM

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

vue vue-components scrollbar scrollbar-custom perfect-scrollbar vue-perfect-scrollbar vue-scrollbar-custom vue-scrollbar customs-crollbar

perfect-scrollbar

@infinitebrahmanuniverse/nolb-vue-pe @everything-registry/sub-chunk-3088

1.1.1

2 years ago

1.1.0

2 years ago

1.0.0

3 years ago