vue.js客服系统实时聊天项目开发（十五）实现聊天界面滚动到底部

唯一Chat

发布于 2023-02-17 11:50:40

3K0

发布于 2023-02-17 11:50:40

文章被收录于专栏：陶士涵的菜地

在进入在线聊天界面以后，不管是历史消息，还是实时消息，都需要让最新消息展示出来。因此需要把聊天界面滚动到最底部

            //滚动到底部
            scrollBottom:function(){
                var _this=this;
                this.$nextTick(function(){
                    var container = _this.$el.querySelector(".chatBox");
                    container.scrollTop = 999999999;
                });
            },

该代码使用了 Vue.js 的生命周期钩子 $nextTick，这是一个异步函数，它会在下一次 DOM 更新循环结束之后执行，保证了在该钩子内执行的代码，元素已经更新完毕。

通过使用 querySelector 方法，该代码获取了 class 为 chatBox 的 DOM 元素，并将该元素的 scrollTop 属性设置为一个较大的数值，使得滚动条滚动到了页面的底部。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-01-31，如有侵权请联系 cloudcommunity@tencent.com 删除

class