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
148 Stars 17 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

# 17,302
TypeScr...
Shell
scrollb...
HTML
99 commits
# 20,545
Ruby
meteor
angular...
bfs
3 commits
# 67,118
JavaScr...
CSS
meteor
Shell
1 commit
# 414,870
React
CSS
reactjs
HTML
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.