vue实现：查找历史聊天记录，并让页面停留在原位置

HTML

<div class="infor" ref="ref_messages_nodes" id="words">
              <div class="infor-historyInfor" v-if="historyInfor===true">
                查看历史消息
              </div>
              <template v-for="(item,index) in sendMessage">
                <div ref="MessageBox">
                  <!-- 发送的消息等其他div // sendMessage是聊天记录列表-->

 方法一：

mounted() {
      window.addEventListener("scroll", this.handleScrolla, true);
    },
    destroyed() {
      window.removeEventListener("scroll", this.handleScrolla, true);
    },

方法二：（在用中）只在HTML里加事件——

<div class="news">
                <div id="words" ref="ref_messages_nodes" class="infor" @scroll="handleScroll">
                  <div v-if="historyInfor === true" class="infor-historyInfor">
                    查看历史消息
                  </div>
                  <template v-for="(item, index) in sendMessage">
...消息记录列表

JS内容（PS：如果切换对象的时候没有滚动条会自动跑到顶部的问题的话就不用多加注释所在的那一层判断） 

return{
 pageNum: 1, //页码
        scrollHeight: 0,
      historyInfor: false, // 是否显示查看历史消息字样
      changeuser: false // 是否切换对象
}       
//——————————————————
//滚动条滚到顶部 加载下一页的聊天记录
      handleScroll: function() {
const e = this.$refs['ref_messages_nodes']
        // 距离顶部
        const scrollTop = e.scrollTop
        if (scrollTop == 0) {
          this.historyInfor = true
          this.pageNum = this.pageNum + 1
          if (this.changeuser === true || this.thenSend === true) {
            this.pageNum = this.pageNum - 1
            // this.chooseId = this.userID
          } // else{
          this.getMsgList(this.pageNum, this.chooseId) // 重新获取聊天记录
          // }
        } else {
          this.historyInfor = false
          // this.getMsgList(1, this.chooseId) // 重新获取聊天记录
         }
        }
      },
//切换对象
chat(va) {
setTimeout(() => {//滚动条保持在底部
				  this.scrollBottm()
      }, 20)
      this.pageNum = 1
			//清空记录
      this.sendMessage = []
      this.contentList = []
      this.inputContent = ''
      this.changeuser = true
      
 const e = this.$refs['ref_messages_nodes']
        // 距离顶部高度
        const scrollTop = e.scrollTop
        if (scrollTop == 0) {
          // console.log('`````')
          this.getMsgList(this.pageNum, va.userId) // 重新获取聊天记录
        } else {
          // this.getMsgList(this.pageNum, va.userId) // 重新获取聊天记录
        }
    },
 //获取聊天记录
      getMsgList(pageNum, userId) {
        request({
          url: 'common/chatHistory/list',
          method: 'POST',
          data: {
            'pageNum': pageNum, // 页码
            'pageSize': 10, // 每页条数
            'shopId': 1, // 店铺Id
            'userId': userId // 用户Id
          }
        }).then(res => {
          // console.log(res)
          this.totalSize = res.info.totalSize // 总页数
          this.totalPages = res.info.totalPages // 总条数
          this.kefuList = res.info.content
          // console.log(this.kefuList)
          this.friends.forEach((e) => {
            if (e.userId == userId) {
              e.number = 0
            }
          })
          // =====
          const arr = []
          this.srcList = []
          res.info.content.forEach((e) => {
            e.message = JSON.parse(e.message)
            // 使用客服最新的头像昵称
            e.message.userName = e['userName']
            e.message.photo = e['photo']
            arr.push(e.message)
            const ahref = e.message.message //p标签
            // 实现图片放大缩小
            if (ahref.includes('img')) {
              if (ahref.includes('zip')) {

              } else {
                const aa = ahref.indexOf('"https:')
                const ff = ahref.substring(aa + 1); //获取第一个https后面所有字符
                const bb = ff.indexOf('"') //获取第一个 " 的位置
                const ee = ff.substring(0, bb)
                this.srcList.push(ee)
                this.srcList = this.srcList.reverse() //倒序
              }
            }
          })
          // this.sendMessage = []
          this.sendMessage = [...arr, ...this.sendMessage] // 合并数组
          if (this.sendMessage.length <= 10) {
            this.noMore = true
          } else {
            this.noMore = false
          }
          const el = this.$refs['ref_messages_nodes']
          this.scrollHeight = el ? el.scrollHeight : 0
          // if (this.changeuser == false && this.pageNum == 1) {
          if (this.pageNum == 1) {
            // 首次渲染后获取scrollHeight并滑动到底部。
            setTimeout(() => {
              this.scrollBottm()
            }, 20)
          } else {
            // 滚动到加载前的位置
            setTimeout(() => {
              const currScrollHeight = el.scrollHeight
              el.scrollTo(0, currScrollHeight - this.scrollHeight)
            }, 20)
          }
          this.changeuser = false
          this.historyInfor = false
        })
      },