react-scrollbars-custom

Native browser scrolling behaviour - component don't emulate scrolling, only showing custom scrollbars
Ultimate performance - 60 fps with help of RAF loop
Desktop or mobile - scrollbars looks the same on any device
No extra stylesheets required - minimum inline styles out of the box
Fully customizable - want a hippo as a scrollbar thumb? Well.. I don't judge you
No matter what changes the content - scrollbars always stay actual
Total tests coverage
Scrollbars nesting
RTL support (read more)
momentum scrolling for iOS

IMPORTANT: default component styles uses Flexible Box Layout for proper scrollbars display.
But you can customize it with help pf inline or linked styles as you wish (see docs).

Installation

npm i --save react-scrollbars-custom

Usage

Minimal configuration

class App extends Component
{
    render() {
        return (
                <Scrollbar style={ {width: '100%', height: '100%', minHeight: 300} } >
                    <p>Hello world!</p>
                </Scrollbar>
        );
    }
}

All properties and methods are in the API Documentation

Examples

Run the example, it will install dependencies, build current component version and run local web-server listening localhost:3000 (browser window will open automatically)

# install dependencies if you haven't yet
npm install
npm run examples

Tests

# install dependencies if you haven't yet
npm install
npm run test

Credits