I have a react ponent with a scrollable div I'm trying to get the div to scroll to the bottom after it mounts:

ponentDidUpdate() {
    var scrollNode = ReactDOM.findDOMNode(this.scrollElement);
    scrollNode.scrollTop = scrollNode.scrollHeight;
}

the scrollNode exists and reflects the correct div however, the value of scrollTop is never changed (it remains 0 even if i set it to some arbitrary number) and the scroll doesn't occur.

UPDATE: Here's an example:

I have a react ponent with a scrollable div I'm trying to get the div to scroll to the bottom after it mounts:

ponentDidUpdate() {
    var scrollNode = ReactDOM.findDOMNode(this.scrollElement);
    scrollNode.scrollTop = scrollNode.scrollHeight;
}

the scrollNode exists and reflects the correct div however, the value of scrollTop is never changed (it remains 0 even if i set it to some arbitrary number) and the scroll doesn't occur.

UPDATE: Here's an example: https://codepen.io/johnryan1/pen/BWoeKQ

• javascript
• html
• reactjs
• dom

• What is it that you want to do? – Deividas Commented Mar 1, 2017 at 6:08
• @DeividasKaržinauskas i'm trying to get the div to scroll to the bottom on mount (i updated the question for clarity) – john_ryan Commented Mar 1, 2017 at 6:09
• Possible duplicate of Scroll to bottom of div? – Deividas Commented Mar 1, 2017 at 6:11
• Try using the solution in the post above. – Deividas Commented Mar 1, 2017 at 6:12
• 1 Can you create a plunker / codepen? – Deividas Commented Mar 1, 2017 at 6:15

1 Answer 1

You need to set a height to your container in your css. For example

.list
   height: 100px