react-scrollbars-custom

DEMO · DOCUMENTATION

• 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

import React, { Component }  from 'react';
import Scrollbar from 'react-scrollbars-custom';

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

Coverage

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

Credits

Big thanks to @malte-wessel with his react-custom-scrollbars which I used before writing this component.
So don't be wondered that repos and code look similar in some places, his package used as ethalon. And for the users convenience i've tried to make API's seamless as much as it possible.