Vue 中类似qq聊天窗口滚动条一直处于底部

原创于 2018-07-31 14:59:36 发布 · 3.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #前端

本文介绍了一种在Vue中使页面渲染后滚动条自动滚动到最底部的方法，通过mounted和updated生命周期钩子以及自定义方法实现，适用于聊天窗口等需要实时更新内容的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


mounted () {
   this.scrollToBottom();
},


//每次页面渲染完之后滚动条在最底部
updated:function(){
   this.scrollToBottom();
},


 methods: {
// 
     scrollToBottom() {
     this.$nextTick(() => {
	    var container = this.$el.querySelector(" 需要滚动条处于底部的容器 ");
        container.scrollTop = container.scrollHeight;
     })}

}