Vue实现渲染数据后控制滚动条位置

遇到难以解决的问题，调整心态，换种思路也许会有意外的收获。

前言

需求场景如下:实现了消息发送，如果容器内消息过多，会出现滚动条，最新的消息位于最底部，不能及时出现在可视区域内，此时就需要在渲染列表后，将滚动条的位置定位到最底部。先来看看最终实现的效果

实现思路

• 渲染完数据后，通过refs对象获取消息容器的实际高度
• 将滚动条的设置到最底部

实现过程

sendMessage: function (event) {
    // 数据渲染
    this.senderMessageList.push(thisSenderMessageObj);
    // 改变滚动条位置
    this.$nextTick(function(){
        this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
        console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
        console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
    });
}

踩坑记录

• 直接设置滚动条的位置

  数据渲染完成后直接获取元素的真实高度，设置滚动条的位置，讲道理好像没什么毛病，结果滚动条的高度没有预想的渲染。问题原因：数据渲染完成后，Vue此时还没有渲染DOM元素，设置的滚动条高度还是之前的容器高度。

  sendMessage: function (event) {
      // 数据渲染
      this.senderMessageList.push(thisSenderMessageObj);
      // 改变滚动条位置
      this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
      console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
      console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
  }
  

• 使用setTimeout()，将DOM操作改为异步(我的解决方案)。

this.messagesContainerTimer = setTimeout(()=>{
    this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
    console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
    console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
    // 清理定时器
    clearTimeout(this.messagesContainerTimer);
},0);

• 正确的实现方式:使用nextTick实现

  感谢评论区掘友指出的错误，Vue官方有提供现成的解决方案。nextTick的作用为:当数据更新了，在dom中渲染后，自动执行该函数.

  this.$nextTick(function(){
      this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
      console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
      console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
  });
  

写在最后

• 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
• 本文首发于 神奇的程序员 网站，如需转载请注明出处💌