react-smooth-scrollbar

by idiotWu

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

134 Stars 15 Forks Last release: Not found MIT License 115 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 ( your contents here... ); } }

ReactDOM.render(, 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 ( ... ); } }

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}&gt;
                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) =&gt; {
            // ...
        });
    }
    
    render() {
        return <div> this is child component. </div>;
    }

    }

    class App extends React.Component { render(){ return ( ); } }

APIs

Documents

License

MIT.

Sponsor

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.