在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;
}