今天项目中需要实现一个聊天模块,需要聊天框一直保持在元素的底部,下面记录下实现的方法:
<template>
<div id="chat"></div>
</template>
<script>
export default{
mounted(){
// 页面首次展示时滚动条定位底部
this.scrollToBottom()
},
updated(){
// 在接收到新消息的时候触发方法将滚动条定位到底部
this.scrollToBottom()
},
methods:{
// 定义将滚动条定位在底部的方法
scrollToBottom(){
this.$nextTick(()=>{
let chat = this.$el.querySelector("#chat")
chat.scrollTop = chat.scrollHeight
})
}
},
}
</script>
<style>
#chat{
height: 200px;
overflow-y:auto;
}
</style>
👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者