This is react component to allow use perfect-scrollbar in React.

To read documentation for versions < 1.0, please visit v0.2.5.

Install the package npm install react-perfect-scrollbar -S Import the css file if you have loader for css files:

    import 'react-perfect-scrollbar/dist/css/styles.css';

Import the module in the place you want to use:

    import PerfectScrollbar from 'react-perfect-scrollbar'

Wrap you content in this component:

    <PerfectScrollbar>
        ... SCROLLBAR CONTENT HERE ...
    </PerfectScrollbar>

The following props are accepted:

The optional parameters used to initialize perfect-scrollbar. For more info, please refer to https://github.com/noraesae/perfect-scrollbar#optional-parameters

Return the container ref: (ref) => void; If you want to scroll to somewhere, just update scrollTop/scrollLeft by the ref:

// Suppose you have save the containerRef to this._scrollRef
// change scroll top
this._scrollRef.scrollTop = 0;

// change scroll left
this._scrollRef.scrollLeft = 0;

Invoked when the y-axis is scrolled in either direction.

Invoked when the x-axis is scrolled in either direction.

Invoked when scrolling upwards.

Invoked when scrolling downwards.

Invoked when scrolling to the left.

Invoked when scrolling to the right.

Invoked when scrolling reaches the start of the y-axis.

Invoked when scrolling reaches the end of the y-axis (useful for infinite scroll).

Invoked when scrolling reaches the start of the x-axis.

Invoked when scrolling reaches the end of the x-axis.

All the callback 'onXXXX' can accept a parameter: the ref to the scrollbar container. You can get the current scrollTop and scrollLeft from it:

    <PerfectScrollbar
        onScrollY={container => console.log(`scrolled to: ${container.scrollTop}.`)}>
        ... SCROLLBAR CONTENT HERE ...
    </PerfectScrollbar>

There are no more methods on components. You should update the scroll position by using the containerRef.

A working example can be found in the example directory. Please run npm run example in browser. (Must run npm run build for the first time)

MIT