Skip to content

scrollToY not working on componentDidMount #18

@santiagopuentep

Description

@santiagopuentep

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions