Vue 实现下拉加载更多如何阻止滚动条自动移动至顶部

Question

做项目的时候遇到的这个问题，解决了下拉加载更多之后，加载虽成功，但是加载出来的消息直接撑开了容器，导致直接在容器内显示出了加载出来的消息，且滚动条在顶部，无法继续滚动。
如何修改使其加载后的历史消息溢出容器，且滚动条保持在加载前那条消息的位置？（即 QQ 类似的加载效果）
相关代码如下：

<el-main
  @scroll.native="handleScroll"
  class="message-box__msg-list"
  v-loading="loading"
>
  <transition
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div
      element-loading-spinner="el-icon-loading"
      element-loading-text="加载历史消息……"
      ref="loadMoreMsg"
      style="height: 64px;"
      v-loading="loadMoreMsg"
      v-show="loadMoreMsg"
    ></div>
  </transition>
  <div
    :class="['message-box__msg-pop', { 'is-right': item.sendBy }]"
    :key="index"
    v-for="(item, index) of messageRecord"
  >
    <el-avatar
      :src="item.sendBy ? userInfo.imgUrl : selectedPerson.imgUrl"
      style="flex-shrink: 0;"
    ></el-avatar>
    <div
      :class="['base-pop', { 'left-pop': !item.sendBy, 'right-pop': item.sendBy }]"
    >{{ item.msg }}</div>
  </div>
  <div ref="msgIntoView"></div>
</el-main>

// 处理滚动
handleScroll(el) {
  const top = el.target.scrollTop
  const height = el.target.scrollHeight
  if (top === 0 && this.msgListSize <= this.msgListTotal) {
    this.loadMoreMsg = true
    this.msgListSize += 10
    this.getMsgRecord().then(err => {
      this.loadMoreMsg = false
      const newHeight = el.target.scrollHeight
      this.$refs.loadMoreMsg.scrollTo(0, newHeight - height)
      if (err) {
        this.$message.error('获取聊天记录失败，请检查网络是否正常')
      }
    })
  }
},

加载后的历史消息不自动显示在容器中，而是等待用户滚动至容器中。

Answer 1

顶一下，别沉了。

Answer 2

element不是有现成的无限滚动吗

Answer 3

你做成功了吗