聊天窗口滚动底部-scrollIntoView

LinBM123

于 2022-08-11 11:38:34 发布

阅读量482

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/LinBM123/article/details/126054990

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用scrollIntoView()方法确保特定元素出现在视窗中，特别适用于聊天应用中滚动到最新消息的功能实现。文章提供了具体的JavaScript代码示例，并讨论了如何解决常见问题。

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

scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。

聊天窗口初始化和发送都需要滚动到最后一条信息的位置，则在初始化聊天记录和发送时分别调用滚动方法

 function goto () {
      var el = document.getElementById('context' + (chatList.value.length - 1))
      if (el) {
        console.log('context' + (chatList.value.length - 1))
        el.scrollIntoView()
      }
    }

如果没有反应或者报错，可能需要加上nextTick

nextTick(() => {
    goto()
})