How to scroll component to the bottom in react

Question

I'm trying to solve kind of simple problem: when component is loaded, i need to scroll it to the bottom. But i've wasted ton of hours trying to solve it. I've tried a lot of different ways (scrollIntoView, scrollTop, scrollBy, etc...) but none of them can't do it. Url below is a link to fiddle where i have a simple component and i need Message to be shown. The problem is that i have to scroll about 10 pixels by myself. I would really appreciate if you help me to solve this problem.

class Hello extends React.Component {
  componentDidMount() {
    const elem = ReactDOM.findDOMNode(this.refs.test);

    if (elem) {
      elem.scrollIntoView(false);
    }
  }

  render() {
    return (
      <div>
        <div className="test" 
             ref="test">
             Hello {this.props.name}
        </div>
        <div>Message</div>
      </div>
    )
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

JSFiddle

Kaloyan Kosev · Accepted Answer · 2017-01-11 17:04:16Z

2

You placed the ref attribute on the wrong place.

Move it one level up in order to catch the whole component, including the "Message" text.

So, basically:

class Hello extends React.Component {
  // ...

  render() {
    return (
      <div ref="test">
        <div className="test">
             Hello {this.props.name}
        </div>
        <div>Message</div>
      </div>
    )
  }
}

Here's a working jsfiddle demo, forked from yours.

answered Jan 11, 2017 at 17:04

Kaloyan Kosev

13.1k8 gold badges63 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Valov_Vladimir · Accepted Answer · 2017-10-19 11:47:48Z

0

  class Hello extends React.Component {
  // ...

  componentDidUpdate() {
    this.scrollDiv.scrollIntoView(false);
  }

  render() {
    return (
      <div
        ref={(el) => {this.scrollDiv = el}}
      >
        <div className="test">
             Hello {this.props.name}
        </div>
        <div>Message</div>
      </div>
    )
  }
}

answered Oct 19, 2017 at 11:47

Valov_Vladimir

12 bronze badges

Comments

Khalid Azam · Accepted Answer · 2017-01-12 06:40:01Z

-1

You should scroll only when the component is loaded into DOM filled with all props.

export default class Hello extends React.Component {
  constructor(props,context){
    super(props,context);
    this.isAlreadyLoaded =  false;
   }

componentWillReceiveProps(nextProps) {
    let scrollToElement = document.getElementById("scroll-element");
    if (scrollToElement && !isAlreadyLoaded){
        this.isAlreadyLoaded = true;
        scrollToElement.scrollIntoView(true);
    }
  }

   render(){
      return {....}
   }
}

answered Jan 12, 2017 at 6:40

Khalid Azam

1,64119 silver badges17 bronze badges

1 Comment

Kaloyan Kosev Over a year ago

That doesn't address the main problem, presented in the question. The question is about why it doesn't scroll down to the "Message" text.

Collectives™ on Stack Overflow

How to scroll component to the bottom in react

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related