Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-scrollbar-iframepublic

    build status npm package

    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.

    install

    npm i react-scrollbar-iframe

    Downloadsweekly downloads

    0

    version

    0.3.5

    license

    MIT

    homepage

    github.com

    repository

    githubgithub

    last publish

    collaborators

    • avatar