vue聊天框向上滚动加载更多？

Question

<div class="chat-container">
              <el-container class="chat-window-container">
                <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 400px;">
                  <div class="mes" v-for="(message, index) in messagescontent" :key="index">
                    <div class="mes_left" v-if="message.userId !== form.ids">
                      <div><el-image class="left_img" :src="message.avatar ? message.avatar : imgUrl" /></div>
                      <div class="mes_list">
                        {{ message.chatContent }}
                      </div>
                    </div>
                    <div style="margin: 20px 20px;"></div>
                    <div class="mes_right" v-if="message.userId == form.ids">
                      <div class="mes_list">
                        {{ message.chatContent }}
                      </div>
                      <div><el-image class="left_img" :src="message.avatar ? message.avatar : imgUrl" /></div>
                    </div>
                  </div>
                </el-scrollbar>

                <el-footer class="input-area">
                  <el-input v-model="inputMessage" :rows="2" type="textarea" placeholder="说点什么"
                    @keyup.enter.native="sendMessage"></el-input>
                  <el-button type="primary" @click="sendMessage">发送</el-button>
                </el-footer>
              </el-container>
            </div>

js部分

  form: {
      page: 10
    },
async getChatDataOlds() {
  if (this.form.id) {
    const res = await getChatDataOld(this.form.id, this.form.page)
    let reversedArr = Array.from({ length: res.length }, (_, i) =>                             res[res.length - 1 - i]);
    this.messagescontent = reversedArr
    console.log(this.messagescontent)
  }
},

vue聊天框向上滚动加载更多，比如this.form.page是10条信息，滚动到这里有个查看更多信息的字眼，再向上滚动加载数据，getChatDataOld这个是加载接口，或者点击查看更多信息向上滚动加载，这样的功能怎么实现呢

Answer 1

大概思路就是监听聊天信息展示框的滚动事件，当滚动条位置距离顶部 <= 50的时候就可以自定请求下一页数据了。

我以前写过客服系统，找了之前的大致代码。

Answer 2

监听滚动事件方案不推荐。逻辑复杂一些。
更推荐使用new IntersectionObserver实现这个效果 直接observe这个 查看更多信息的 dom 简简单单