Description

• It is wrap the perfect-scrollbar for the element.

• Auto update scrollbar (resize, change data), you don't have to do anything.

• Support for scroll-y for only the body of the table. (Keep header)

Usage

npm install react-perfect-scrollbar-z

Import the module in the place you want to use:

import 'react-perfect-scrollbar-z/build/styles.css';

import Scrollbar from 'react-perfect-scrollbar-z'

Snippet

simple

    // tagName = 'div' wrapName='div'
    // something1 (..any, showHide, data2, data3)
    <Scrollbar height="100px" effectData={something1...}>
        { something1...  }
    </Scrollbar>

special tagName (tbody, ul, dl, ol)

    // const refScroll = useRef(null) // you handle scrollbars
    <Scrollbar
        tagName="tbody" // tbody, ul, dl, ol
        maxHeight="400px"
        className="list-group"
        effectData={listData}
        always
        // onScrollY={evt => console.log(evt)}
        // refScroll={refScroll}
    >
        { listData.map(item => <tr>...</tr>) }
    </Scrollbar>

// access scrollbar (your handler)
refScroll.current.element.scrollTop = 0  || refScroll.current.update()

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 | | style | Object | Your css-style | | 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 | | refScroll | useRef | If you want to use scrollbars (ps scrollbar) | | --- | --- | --- | | 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). You should not use maxWidth, width (default by table).

• 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

<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