标签：vue dom 滚动条 聊天 chatContent scrollTop setTimeout

问题来源

前几天为了实现一个聊天功能，采用websocket技术，前端收到webscoket传递的消息后，需要将聊天内容滚动到最下边，一直操作，没能成功，最后采用以下方式解决

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

标签：vue,dom,滚动条,聊天,chatContent,scrollTop,setTimeout
来源： https://blog.csdn.net/qq_43532386/article/details/111784809

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。