在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)
                })
            }

猜你喜欢

转载自blog.csdn.net/qq_43532386/article/details/111784809
今日推荐