Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

React component that scrolls to child refs programmatically

Resources

License

Releases

No releases published

Packages

No packages published