Vue input textarea自动滚动到最底部

Vue input textarea自动滚动到最底部

这是什么意思，就是类似于QQ聊天框一样的效果，新来的一条一条的消息会不停地补充在textarea输入框，然后展示最新来得数据，就需要textarea输入框的滚动条默认下滑到最下面。

首先定一个textarea类型的input组件

首先使用 vue，其实一样，但是我使用了 element 组件库，其实不影响，和单纯的 textarea 效果一样。主要就是给 textarea 添加一个 id 或者是 class ，在后面新数据添加到输入框之后获取到元素，把他的滚动条滚动高度设置成滚动最大高度就可以。

<el-input 
   id="textarea_id"
   type="textarea"
   :rows="20"
   placeholder="请输入内容"
   v-model="textarea" 
   readonly="">
</el-input>

每次新增内容都要调用

const textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;

这样就可以了，需要在每次输入框数据添加后都要添加这两行代码，这样才能保证每次新数据来滚动条滚动到最后。

留坑

这样写之后，理论是可以的，但是我写了之后不行！！！

为什么，找了好久原因。

填坑

哈哈哈，很简单不用解释，一看就恍然大悟 懂了...

this.$nextTick(() => {
   setTimeout(() => {
      const textarea = document.getElementById('scroll_text');
      textarea.scrollTop = textarea.scrollHeight;
   }, 13)
})

其实 $nextTick 就可以，在加个延时确保肯定没问题！

【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！

【重要说明】本文为本人的学习记录，论点和观点仅代表个人而不代表当时技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！

​

【Gitee地址】秦浩铖：​​https://gitee.com/wjw1014​​