聊天界面最近的消息显示在最底部，向上滑动可查看更早时间的消息

芣莨朲

于 2019-10-26 14:27:31 发布

阅读量1.9k

点赞数 1

分类专栏： function

本文链接：https://blog.csdn.net/weixin_43990566/article/details/102756249

版权

function 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种基于VUE的聊天应用中实现聊天记录滚动到底部的优化方法，通过自定义函数chatListDown实现平滑滚动效果，避免了页面加载时的跳动问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自设计聊天记录

整个聊天记录用ul标签包裹

每一条聊天记录就用一个li代表

因为用VUE写的，所以搞了个函数挂载。

chatListDown(pos, initCount){
	// 滚动聊天列表到底部
	const _this = this;
    var scrollTimer = null
    let dom = document.getElementById('chat-list')
    if (!dom) {
      return
    }
    let maxCount = 5
    initCount = initCount || 1
    if (typeof pos !== 'number') {
      pos = Math.max(dom.scrollHeight - dom.clientHeight, 888888)
    }
    dom.scrollTop = pos
    if ((dom.scrollTop < pos) && (initCount < maxCount)) {
      clearTimeout(scrollTimer)
      scrollTimer = setTimeout(() => {
        initCount++
        _this.scrollChatListDown(pos, initCount)
      }, 200)
    }
}

挂载完打开页面就是聊天界面的效果了。