react-custom-scrollbars-2

• frictionless native browser scrolling
• native scrollbars for mobile devices
• fully customizable
• auto hide
• auto height
• universal (runs on client & server)
• requestAnimationFrame for 60fps
• no extra stylesheets
• well tested, 100% code coverage

Demos · Documentation

Quick note

This repo is due to the original (fantastic) react-custom-scrollbars package going a little stale and we needed a handful of bug fixes which will be managed here.

Installation

1npm install react-custom-scrollbars-2 --save

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes ReactCustomScrollbars available as a global object, you can grab a pre-built version from unpkg. We don’t recommend this approach for any serious application, as most of the libraries complementary to react-custom-scrollbars-2 are only available on npm.

Usage

This is the minimal configuration. Check out the Documentation for advanced usage.

1import { Scrollbars } from 'react-custom-scrollbars-2';
2
3class App extends Component {
4  render() {
5    return (
6      <Scrollbars style={{ width: 500, height: 300 }}>
7        <p>Some great content...</p>
8      </Scrollbars>
9    );
10  }
11}

The <Scrollbars> component is completely customizable. Check out the following code:

1import { Scrollbars } from 'react-custom-scrollbars-2';
2
3class CustomScrollbars extends Component {
4  render() {
5    return (
6      <Scrollbars
7        onScroll={this.handleScroll}
8        onScrollFrame={this.handleScrollFrame}
9        onScrollStart={this.handleScrollStart}
10        onScrollStop={this.handleScrollStop}
11        onUpdate={this.handleUpdate}
12        renderView={this.renderView}
13        renderTrackHorizontal={this.renderTrackHorizontal}
14        renderTrackVertical={this.renderTrackVertical}
15        renderThumbHorizontal={this.renderThumbHorizontal}
16        renderThumbVertical={this.renderThumbVertical}
17        autoHide
18        autoHideTimeout={1000}
19        autoHideDuration={200}
20        autoHeight
21        autoHeightMin={0}
22        autoHeightMax={200}
23        thumbMinSize={30}
24        universal={true}
25        {...this.props}>
26    );
27  }
28}

All properties are documented in the API docs

Examples

Run the simple example:

1# Make sure that you've installed the dependencies
2npm install
3# Move to example directory
4cd react-custom-scrollbars-2/examples/simple
5npm install
6npm start

Tests

1# Make sure that you've installed the dependencies
2npm install
3# Run tests
4npm test

Code Coverage

1# Run code coverage. Results can be found in `./coverage`
2npm run test:cov

License

MIT