在componentDidUpdate後滾動到底部

Question

動態添加div內的項目。在componentDidUpdate之後，我想滾動div的內容，以便最後一個列表項可見。

CSS

div { 
    height: 100px; 
    overflow-y: scroll; 
} 

反應JS

return(
<div> 
    ... 
    <div ref='wrap'> 
    <ul> 
    <li>item</li> 
     .. 
    <li>last item</li> 
    </ul> 
</div> 
    ... 
</div>) 

Answer 1

您可以將元素的scrollTop的屬性設置爲元素的當前scrollHeight屬性。這將使滾動到底部。

您不需要爲此使用jquery - this.refs[refname]爲您提供了可以對其執行操作的DOM元素。

componentDidUpdate() { 
    var el = this.refs.wrap; 
    el.scrollTop = el.scrollHeight; 
}