Need help with react-smooth-scrollbar?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

idiotWu
142 Stars 16 Forks MIT License 115 Commits 10 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 21,268
TypeScr...
Shell
scrollb...
HTML
99 commits
# 19,139
Ruby
meteor
webrtc
bittorr...
3 commits
# 61,550
JavaScr...
crl
HTML
dsa
1 commit
# 420,740
React
reactjs
HTML
TypeScr...
1 commit

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.