聊天应用新消息到达时滚动条不触底、最新消息不显示如何解决？

你触发滚动逻辑的时机错误：在this.messages.push(ms)执行后，Vue的响应式DOM更新是异步执行的，此时你立即读取.msg元素的scrollHeight，拿到的是新消息DOM渲染之前的旧高度，所以滚动位置始终比最新位置少了一条消息的高度。
另外你后续调整的滚动代码还写错了运算符号：messageBody.scrollTop = (messageBody.scrollHeight + messageBody.clientHeight)是完全错误的写法，正确的基准逻辑是scrollTop = 滚动元素总高度 - 滚动元素可视高度，也就是你最初写的scrollHeight - clientHeight。

使用Vue提供的$nextTickAPI，将滚动逻辑延迟到DOM更新完成后再执行，就能拿到最新的scrollHeight完成定位。

修正后的完整sendFunc代码如下：

methods: {
  sendFunc() {
    if(this.msgInput != null && this.msgInput != '') {
      let ms = { name : 'emre', msg: this.msgInput, time: '12:02' }
      this.messages.push(ms);
      this.msgInput = '';
      // 等待DOM更新完成后再执行滚动逻辑
      this.$nextTick(() => {
        var messageBody = document.querySelector('.msg');
        // 写法1：基础赋值写法
        messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
        // 写法2：更灵活的scrollTo写法，支持加平滑滚动效果
        // messageBody.scrollTo({
        //   top: messageBody.scrollHeight,
        //   behavior: 'smooth' // 不需要平滑滚动可以删掉这行
        // })
      })
    }
  },
}

如果需要兼容新消息到达时、用户主动滚动到上方不想被强制滚到底的场景，可以在滚动前加判断：只有当前滚动条已经在底部时，才执行自动滚动逻辑。

内容的提问来源于stack exchange，提问作者Hakan Gundogan