在vue 中 ,dom操作滚动条 scrollTop无效

问题来源

前几天为了实现一个聊天功能,采用websocket技术,前端收到webscoket传递的消息后,需要将聊天内容滚动到最下边,一直操作,没能成功,最后采用以下方式解决
聊天功能链接:https://blog.csdn.net/qq_43532386/article/details/111773941

html布局

1、用的是一个大div里面(id为chatContent),利用vue进行v-for每一条的聊天内容的展示,
2、大的div使用 overflow: auto;属性,自动出现滚动条

vue方法

1、setTimeout的时间可以稍设长点,我最开始就是设的太小了,导致一直以为是方法本身的错误
2、在自己想要操作的地方直接调用这个方法即可

 scrollToBottom() {
                this.$nextTick(() => {
                    setTimeout(() => {
                        var scrollTop = document.getElementById("chatContent")
                        scrollTop.scrollTop = scrollTop.scrollHeight
                    }, 200)
                })
            }
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值