react-custom-scrollbars

• 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

Installation

npm install react-custom-scrollbars --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 are only available on npm.

Usage

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

import{Scrollbars}from'react-custom-scrollbars';classAppextendsComponent{render(){return(<Scrollbarsstyle={{width: 500,height: 300}}><p>Some great content...</p></Scrollbars>);}}

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

import{Scrollbars}from'react-custom-scrollbars';classCustomScrollbarsextendsComponent{render(){return(<ScrollbarsonScroll={this.handleScroll}onScrollFrame={this.handleScrollFrame}onScrollStart={this.handleScrollStart}onScrollStop={this.handleScrollStop}onUpdate={this.handleUpdate}renderView={this.renderView}renderTrackHorizontal={this.renderTrackHorizontal}renderTrackVertical={this.renderTrackVertical}renderThumbHorizontal={this.renderThumbHorizontal}renderThumbVertical={this.renderThumbVertical}autoHideautoHideTimeout={1000}autoHideDuration={200}autoHeightautoHeightMin={0}autoHeightMax={200}thumbMinSize={30}universal={true}{...this.props}>
);
}}

All properties are documented in the API docs

Examples

Run the simple example:

# Make sure that you've installed the dependencies
npm install
# Move to example directorycd react-custom-scrollbars/examples/simple
npm install
npm start

Tests

# Make sure that you've installed the dependencies
npm install
# Run tests
npm test

Code Coverage

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

License

MIT