Skip to content
React component that scrolls to child refs programmatically
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
scripts
src
.babelrc
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
index.js
package.json

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

You can’t perform that action at this time.