Skip to content
This repository has been archived by the owner on Jun 14, 2022. It is now read-only.

[Not Actively Maintained] A wrapper for smooth-scrollbar to React Component

License

Notifications You must be signed in to change notification settings

idiotWu/react-smooth-scrollbar

Repository files navigation

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

About

[Not Actively Maintained] A wrapper for smooth-scrollbar to React Component

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published