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 --saveImport 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 somethingprops
| 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: usingrefScroll -
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> => OKlibTable
// `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/olwith basic
<Scrollbar :effectData="abcd" .... > <ul> <for>...</for> </ul> <Scrollbar>RUN
npm installnpm run dev
npm run startLicense
MIT