Vue 滚动条自动到聊天框的底部
样式图 :
html
<!-- 聊天窗体 -->
<div class="interact" id="interact">
<!-- 聊天内容窗体 -->
<div></div>
</div>
<!-- 文本域 -->
<el-input type="textarea" :rows="3" v-model="textarea" resize="none"
@keydown.native="listen($event)"></el-input>
<!-- 发送按钮 -->
<div @click="send">发送 (Enter)</div>
给聊天窗体加 id
js
// 发送按钮
send() {
if (this.textarea != '') {
this.interact.push({
// 将文本域插入到聊天框...
})
this.$nextTick(() => {
let msg = document.getElementById('interact') // 获取对象
msg.scrollTop = msg.scrollHeight // 滚动高度
})
this.textarea = ''
}
},
this.$nextTick(() => {
let msg = document.getElementById(‘interact’)
msg.scrollTop = msg.scrollHeight
})