react-smooth-scrollbar

smooth-scrollbar for react projects.

Requirements

React 0.14+

Install

npm install react-smooth-scrollbar smooth-scrollbar --save

Demo

http://idiotwu.github.io/react-smooth-scrollbar/

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Scrollbar from 'react-smooth-scrollbar';
 
class App extends React.Component {
    render() {
        return (
            <Scrollbar
                damping={number},
                thumbMinSize={number},
                syncCallbacks={boolean},
                renderByPixels={boolean},
                alwaysShowTracks={boolean},
                continuousScrolling={boolean},
                wheelEventTarget={element},
                plugins={object},
                onScroll={func},
            >
                your contents here...
            </Scrollbar>
        );
    }
}
 
ReactDOM.render(<App />, document.body);

Available Options

parameter	type	default	description
damping	number	0.1	Momentum reduction damping factor, a float value between (0, 1). The lower the value is, the more smooth the scrolling will be (also the more paint frames).
thumbMinSize	number	20	Minimal size for scrollbar thumbs.
renderByPixels	boolean	true	Render every frame in integer pixel values, set to true to improve scrolling performance.
alwaysShowTracks	boolean	false	Keep scrollbar tracks visible.
continuousScrolling	boolean	true	Set to true to allow outer scrollbars continue scrolling when current scrollbar reaches edge.
wheelEventTarget	EventTarget	null	Element to be used as a listener for mouse wheel scroll events. By default, the container element is used. This option will be useful for dealing with fixed elements.
plugins	object	{}	Options for plugins, see Plugin System.

Confusing with the option field? Try edit tool here!

Using Scrollbar Plugins

import { Component } from 'react';
import PropTypes from 'prop-types';
import SmoothScrollbar from 'smooth-scrollbar';
import OverscrollPlugin from 'smooth-scrollbar/plugins/overflow';
import Scrollbar from 'react-smooth-scrollbar';
 
SmoothScrollbar.use(OverscrollPlugin);
 
class App2 extends Component {
    render() {
        return (
            <Scrollbar> ... </Scrollbar>
        );
    }
}

Get Scrollbar Instance

1. Use ref in parent component:

   class Parent extends React.Component {
       componentDidMount() {
           const { scrollbar } = this.$container;
       }
    
       render() {
           return (
               <Scrollbar ref={c => this.$container = c}>
                   your content...
               </Scrollbar>
           );
       }
   }

2. Use Context in child component:

   class Child extends React.Component {
       static contextTypes = {
           getScrollbar: React.PropTypes.func
       };
    
       componentDidMount() {
           this.context.getScrollbar((scrollbar) => {
               // ...
           });
       }
    
       render() {
           return <div> this is child component. </div>;
       }
   }
    
   class App extends React.Component {
       render(){
           return (
               <Scrollbar>
                   <Child />
               </Scrollbar>
           );
       }
   }

APIs

Documents

License

MIT.