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
: 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> => 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
npm install
npm run dev
npm run start
License
MIT