React Scroll Area

npm install react-scroll-area

A React component that enables you to programmatically scroll to child components within it.

Example Usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ScrollArea from 'react-scroll-area';

class MyComponent extends Component {

  componentDidMount() {
    const scrollarea = ReactDOM.findDOMNode(this.refs.scrollarea);

    setTimeout(() => {
      scrollarea.scrollTo(this.refs.first_target);
    }, 3000);

    setTimeout(() => {
      scrollarea.scrollTo(this.refs.second_target, {
        offsetTop: -100,
        offsetLeft: 0,
        duration: 2000,
        delay: 500,
        tick: 50,
      });
    }, 6000);
  }

  render() {
    return (
      <ScrollArea style={{width: 400, height: 400}} ref='scrollarea'>
        <h2 ref="first_target" style={{marginBottom: 500}}>First Target</h2>
        <h2 ref="second_target">Second Target</h2>
      </ScrollArea>
    );
  }
}

Options

Passed as second argument to scrollTo method.

| Prop Name | Description | Default Value | |------------|----------------------------------------------------------------------------|---------------| | offsetTop | desired vertical offset of scroll container from target at end of scroll | 0 | | offsetLeft | desired horizontal offset of scroll container from target at end of scroll | 0 | | duration | duration of scroll | 200 | | delay | delay before starting to scroll | 0 | | tick | period between each tick of scroll animation | 30 |

License

MIT