BosNaufal / react-scrollbar

The Simplest Scroll Area Component with custom scrollbar for React JS. https://bosnaufal.github.io/react-scrollbar
MIT License
71 stars 30 forks source link

scrollToY not working on componentDidMount #18

Open santiagopuentep opened 7 years ago

santiagopuentep commented 7 years ago

I'm a component to create a scrolled div that on componentDidMount completely scrolls (100% from the top).

The problem is that it doesn't scroll on componentDidMount.

If I use setInterval inside componentDidMount with a few miliseconds delay to call scrollToY it does scroll.

The component:

import React from "react";
import ReactScrollbar from 'react-scrollbar-js';

const ScrolledText = React.createClass({
    propTypes: {
        text: React.PropTypes.string.isRequired
    },

    componentDidMount() {
        if (this.scrollBar) {
            this.scrollBar.scrollToY("100%");
        }
    },

    saveScrollBarRef(ref) {
        this.scrollBar = ref;
    },

    render() {
        const { text } = this.props;

        return (
            <ReactScrollbar
                ref={this.saveScrollBarRef}
                style={{
                    height: "100%"
                }}
            >
                <div>{text}</div>
            </ReactScrollbar>
        );
    }
});

export default ScrolledText ;

I'm using it inside a simple div with a set height like this:

<div style={{height: "25px"}}>
    <EditionTextArea
        text={myLongText}
    />
</div>