聊天——拉去历史记录,保持聊天页面静止

// 第一次获取数据放在聊天页面中
   if (!this.message.length) {
        this.message = res.data.list // 聊天列表
        this.$nextTick(() => {
          const div = document.getElementById('messgaeContent')
          div.scrollTop = div.scrollHeight // 滚动到最下面
          this.scrollHeight = div.scrollTop // 记录上一次滚动的距离
        })
      } else {
        this.message.unshift(...(res.data.list)) // 在数组最前面放数据
        this.$nextTick(() => {
          const div = document.getElementById('messgaeContent')
          div.scrollTop = div.scrollHeight - this.scrollHeight - this.$refs.scrollRef.offsetHeight // 内容全文高 - 上一次滚动距离 - 本身内容高
        })
      }

内容全文高 - 上一次滚动距离 - 本身内容高就是当前位置

你可能感兴趣的:(vue,应用场景,javascript,前端,html)