3

I basically want to animate scrollTop in React when a react property changes value. A "cut-down" Component I am using looks something like this:

import React, { Component } from 'react';

class ScrollComponent extends Component {

    constructor(props) {
        super(props);
        this.scrollTo = this.props.scrollTo;
    }

    componentDidUpdate() {
        //Animate "container" to scroll to this.props.scrollTo in 1000ms
    }

    render() {
        return (
            <div ref="container" style={{height:'300px', width:'100%', overflowY:'scroll',position:'relative'}}>
                <div style={{height:'1000px'}}>
                </div>
            </div>
        )
    }
}

I guessing this can easily be done using jQuery, a bit trickier with native JavaScript. What is the correct way to do this with React?

I am aware of ReactCSSTransitionGroup and ReactTransitionGroup, if there is an easy way I can do it with these addons, that would be great, if there is another way, even better.

Thanks.

slim1801
  • 531
  • 3
  • 8
  • 19

0 Answers0