A React implementation of smooth-scrollbar

A React implementation of smooth-scrollbar

react-smooth-scrollbar smooth-scrollbar for react projects. Live Demo http://idiotwu.github.io/react-smooth-scrollbar/ GitHub

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/overscroll';
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.

Sponsor

Github Repository

Tags: #React #Scroll