javascript - React scrollTop not working - Stack Overflow

admin管理员组

文章数量:1430702

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

Share Improve this question Follow edited Mar 1, 2017 at 6:35 john_ryan asked Mar 1, 2017 at 6:04 john_ryanjohn_ryan 1,82722 gold badges2121 silver badges3535 bronze badges 7

• 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

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 4

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

.list
   height: 100px

本文标签： javascriptReact scrollTop not workingStack Overflow