textarea输入框随着内容的增加使滚动条向下滚动

测试给我提了个bug:在textarea输入框下，表情输入多行后，滚动条没有向下滚动。
于是我自己测试了下，如果连续输文字，当超过textarea限制的行数后，滚动条会自动向下滚动。
但是连续输入表情（此时textarea是失去焦点的），我发现当超出textarea限制的行数后，滚动条是不会自动向下滚动的。
我又去看了微博的textarea，发现也是这种情况。PS:不知道是不是微博的测试没有这么变态，去连续输入上百个表情。
我最后找到了解决办法：输入表情的时候通过JS来改变textarea的scrollTop来让滚动条滚下去。
代码：

<textarea
  ref="textarea"
  v-model="text"
  :placeholder="placeholder">    
</textarea>

<div class="emoji-box__hd">全部表情</div>
<ul class="emoji-list">
   <li class="emoji-item"
     v-for="emoji in emojis"
     :key="emoji.icon"
     @click.stop="addEmoji(emoji)">
     <img :src="require(`@/assets/images/emojis/${emoji.icon}.png`)"/>
   </li>
</ul>

JS:

// 添加颜文字
addEmoji(emoji) {
  console.log('addEmoji');
  this.$refs.textarea.scrollTop = this.$refs.textarea.scrollHeight;
},