React component that scrolls to child refs programmatically
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist init Jul 18, 2016
scripts init Jul 18, 2016
src
.babelrc init Jul 18, 2016
.eslintrc
.gitignore init Jul 18, 2016
.npmignore init Jul 18, 2016
LICENSE init Jul 18, 2016
README.md init Jul 18, 2016
index.js init Jul 18, 2016
package.json init Jul 18, 2016

README.md

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