react-scrollbar

Simple ScrollArea component built for React.

Demo

npm install react-scrollbar --save

React Scrollbar requires React 0.13 or later

Usage examples

React 0.14

    var React = require('react');
    var ReactDOM = require('react-dom');
    var ScrollArea = require('react-scrollbar');

    var App = React.createClass({
      render() {
        return (
          <ScrollArea
            speed={0.8}
            className="area"
            contentClassName="content"
            horizontal={false}
            >
            <div>Some long content.</div>
          </ScrollArea>
        );
      }
    });

    ReactDOM.render(<App/>, document.body);

React 0.13

For React 0.13 you need to wrap <ScrollArea> child into a function.

<ScrollArea>
    { () => <div>Some long content. </div> }
</ScrollArea>

Run the example app

git clone https://github.com/souhe/reactScrollbar.git
cd reactScrollbar
npm install
gulp watch

then open http://localhost:8003.

API

Props

    <ScrollArea
        speed={Number}
        className={String}
        style={Object}
        contentClassName={String}
        contentStyle={Object}
        horizontal={Boolean}
        horizontalContainerStyle={Object}
        horizontalScrollbarStyle={Object}
        vertical={Boolean}
        verticalContainerStyle={Object}
        verticalScrollbarStyle={Object}
    >

speed

Scroll speed applied to mouse wheel event. Default: 1

className

CSS class names added to main scroll area component.

style

Inline styles applied to the main scroll area component.

contentClassName

CSS class names added to element with scroll area content.

contentStyle

Inline styles applied to element with scroll area content.

horizontal

When set to false, horizontal scrollbar will not be available. Default: true

horizontalContainerStyle

Inline styles applied to horizontal scrollbar's container.

horizontalScrollbarStyle

Inline styles applied to horizontal scrollbar.

vertical

When set to false, vertical scrollbar will not be available, regardless of the content height. Default: true

verticalContainerStyle

Inline styles applied to vertical scrollbar's container.

verticalScrollbarStyle

Inline styles applied to vertical scrollbar.

contentWindow

You can override window to make scrollarea works inside iframe. Default: window

ownerDocument

You can override document to make scrollarea works inside iframe. Default: document

Context

In context of each <ScrollArea> child could be injected an object scrollArea contains method:

refresh()

That method allows manual refreshing of the scrollbar.

React 0.14 example using ES6 syntax:

class App extends React.Component {
    render(){
        return (
            <ScrollArea>
                <Content />
            </ScrollArea>
        );
    }
}

class Content extends React.Component {
    render(){
        return (
            <div onClick={this.handleSomeAction.bind(this)}> Some long content </div>
        );
    }

    handleSomeAction(){
        this.context.scrollArea.refresh();
    }
}

Content.contextTypes = {
    scrollArea: React.PropTypes.object
};

scrollTop()

It allows to scroll to the top of ScrollArea component.

scrollBottom()

It allows to scroll to the bottom of ScrollArea component.

scrollXTo(topPosition)

It moves vertical scrollbar to topPosition.

scrollLeft()

It allows to scroll to the left of ScrollArea component.

scrollRight()

It allows to scroll to the right of ScrollArea component.

scrollYTo(leftPosition)

It moves horizontal scrollbar to leftPosition.

Change log

Every release is documented on the Github Releases page.