1、背景：
实现一个类似于chatGpt的聊天界面，左侧具有创建会话以及聊天记录列表界面，如图：
2、需求：
用户单击左侧聊天记录列表，以及新发送消息，右侧会话历史滚动条需要实时保持在聊天记录最底部,并且当用户滚动滚动条时，取消滚动到底部的效果（避免页面抖动），当用户再次将滚动条滚动到底部时，再次触发滚动到底部效果
//通过class绑定会话容器
3、只需要封装方法，在需要触发会话界面的地方调用即可
当点击左侧会话历史时，右侧内容需要保持到最底部
const handleClickItem = (item: any, index: number) => {
//...代码
//实时滚动
setTimeout(() => {
scrollToBottom()
}, 200)
}
当发送了新消息后
// 滚动到底部
const chatContent: any = ref(null)//装会话的容器
const isScrolling = ref(false)//用于判断用户是否在滚动
function scrollToBottom() {
nextTick(() => {
//注意要使用nexttick以免获取不到dom
if (!isScrolling.value) {
chatContent.value.scrollTop = chatContent.value.scrollHeight - chatContent.value.offsetHeight
}
})
}
function handleScroll() {
const scrollContainer = chatContent.value
const scrollTop = scrollContainer.scrollTop
const scrollHeight = scrollContainer.scrollHeight
const offsetHeight = scrollContainer.offsetHeight
if (scrollTop + offsetHeight < scrollHeight) {
// 用户开始滚动并在最底部之上，取消保持在最底部的效果
isScrolling.value = true
} else {
// 用户停止滚动并滚动到最底部，开启保持到最底部的效果
isScrolling.value = false
}
}
// 创建一个连接
var connection = new signalR.HubConnectionBuilder()
//...
// 监听到消息
connection.on('ReceiveMessage', function (message, isOver, isFirst) {
// 在监听到ai回复的地方调用滚动到底部方法
scrollToBottom()
})
onMounted(async () => {
await nextTick
chatContent.value = document.getElementsByClassName('checkdom')[0]
scrollToBottom()
// 监听滚动事件，判断用户滚动状态
chatContent.value.addEventListener('scroll', handleScroll)
})
💡 关键要点
1、背景： 实现一个类似于chatGpt的聊天界面，左侧具有创建会话以及聊天记录列表界面，如图： 2、需求： 用户单击左侧聊天记录列表，以及新