聊天窗口滚动底部-scrollIntoView

本文介绍了如何使用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()
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值