Vue 滚动条自动到聊天框的底部

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
})