# vue-perfect-scrollbar-z
> Vue Scrollbar - Best Wrap for perfect-scrollbar.
Latest version **1.1.1** (published 2021-12-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue-perfect-scrollbar-z
pnpm add vue-perfect-scrollbar-z
yarn add vue-perfect-scrollbar-z
bun add vue-perfect-scrollbar-z
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-12-03 |
| First published | 2021-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Delpi.Kye |
| Maintainers | delpikye |
| Keywords | vue, vue-components, scrollbar, scrollbar-custom, perfect-scrollbar, vue-perfect-scrollbar, vue-scrollbar-custom, vue-scrollbar, customs-crollbar |
## Links
- npm: https://www.npmjs.com/package/vue-perfect-scrollbar-z
- Repository: https://github.com/delpikye-v/vue-perfect-scrollbar
- Issues: https://github.com/delpikye-v/vue-perfect-scrollbar/issues
- npm.io page: https://npm.io/package/vue-perfect-scrollbar-z
## Dependencies (1)
- [perfect-scrollbar](https://npm.io/package/perfect-scrollbar.md) ^1.5.2
## Alternatives
- [@sentry/react-native](https://npm.io/package/@sentry/react-native.md) — 2.6M weekly downloads
- [@ardatan/aggregate-error](https://npm.io/package/@ardatan/aggregate-error.md) — 708.1K weekly downloads
- [custom-error-generator](https://npm.io/package/custom-error-generator.md) — 2.0K weekly downloads
- [@technik-sde/prosemirror-recreate-transform](https://npm.io/package/@technik-sde/prosemirror-recreate-transform.md) — 1.5K weekly downloads
- [@suchipi/error-utils](https://npm.io/package/@suchipi/error-utils.md) — 78 weekly downloads
## Recent versions
- 1.1.1 (latest) — 2021-12-03
- 1.1.0 — 2021-11-19
- 1.0.0 — 2021-10-07
## README
---
#### Description
+ It is wrap the [perfect-scrollbar](https://github.com/mdbootstrap/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
```js
npm install vue-perfect-scrollbar-z --save
```
Import the module in the place you want to use:
```js
/*
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`
```js
// tagName = 'div' wrapName='div'
// something1 = [effect1, effect2, listData, showHide, ..., somthing]
{ something1 }
```
##### `special tagName (tbody, ul, dl, ol)`
```js
...for data
```
```js
// access scrollbar (your handler)
let { scrollbar } = this.$refs.refScroll
scrollbar.element.scrollTop = 0 // or something
```
---
#### props
| props | type | description |
|----------------------|-------------------------------|----------------------------------------------------------------------------|
| options | Object | [perfect-scrollbar/options](https://github.com/mdbootstrap/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.
```js
=> no
=> OK
```
+ `libTable`
```js
// `maxHeight`, `height`, `maxWidth`, `width` => try to tbody
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
```js
```
#### RUN
LIVE EXAMPLE
```js
npm install
```
```js
npm run dev
npm run start
```
### License
MIT
---
_Source: https://npm.io/package/vue-perfect-scrollbar-z · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._